revision:
The insertAdjacentText() method of the Element interface, given a relative position and a string, inserts a new text node at the given position relative to the element it is called from.
element.insertAdjacentText(where, data)
node.insertAdjacentText(where, data)
element.insertAdjacentText(position, text)
node.insertAdjacentText(position, text)
Parameters:
where, position : required. a string representing the position relative to the element the method is called from; must be one of the following strings:
'beforebegin': before the element itself.
'afterbegin': just inside the element, before its first child.
'beforeend': just inside the element, after its last child.
'afterend': after the element itself.
data, text : a string from which to create a new text node to insert at the given position where relative to the element the method is called from.
beforeBtn.addEventListener("click", () => {
para.insertAdjacentText("afterbegin", textInput.value);
});
afterBtn.addEventListener("click", () => {
para.insertAdjacentText("beforeend", textInput.value);
});
Click "insert" to insert some text after the header:
<div>
<button onclick="insertFunction()">Insert</button>
<p>Click "insert" to insert some text after the header:</p>
<h4 id="myH4">My Header</h4>
</div>
<script>
function insertFunction() {
const h4 = document.getElementById("myH4");
let text = "My inserted text";
h4.insertAdjacentText("afterend", text);
}
</script>
Click "insert" to insert some text inside the header:
<div>
<button onclick="insertFunction2()">Insert</button>
<p>Click "insert" to insert some text inside the header:</p>
<h4 id="myH42">My Header</h4>
</div>
<script>
function insertFunction2() {
const h4 = document.getElementById("myH42");
let text = "My inserted text";
h4.insertAdjacentText("afterbegin", text);
}
</script>
Click "insert" to insert some text inside the header:
<div>
<button onclick="insertFunction3()">Insert</button>
<p>Click "insert" to insert some text inside the header:</p>
<h4 id="myH43">My Header</h4>
</div>
<script>
function insertFunction3() {
const h4 = document.getElementById("myH43");
let text = "My inserted text";
h4.insertAdjacentText("beforebegin", text);
}
</script>
Click "insert" to insert some text inside the header:
<div>
<button onclick="insertFunction4()">Insert</button>
<p>Click "insert" to insert some text inside the header:</p>
<h4 id="myH44">My Header</h4>
</div>
<script>
function insertFunction4() {
const h4 = document.getElementById("myH44");
let text = "My inserted text";
h4.insertAdjacentText("beforeend", text);
}
</script>