Let us work on the following body code:
<body>
<h1 id="firstId">hey there</h1>
<ul>
<li ><a href="#">Link 1</a></li>
<li class = "dimple">full</li>
<li class = "pimple">ness</li>
</ul>
</body>
Consider the following example:
<body>
<h1 id="firstId">hey there</h1>
<ul>
<li ><a href="#">Link 1</a></li>
<li class = "dimple">full</li>
<li class = "pimple">ness</li>
</ul>
</body>
Consider the following example:
var p = document.createElement("P");
p.textContent = "A new Paragraph!";
p.style.fontSize = "16px";
console.log(p);
// let us decide where we want to add it
var a = document.querySelectorAll("li")[0];
a.appendChild(p);
This will insert the paragraph inside the first list item after the anchor tag. Now, if I want to insert it before the anchor tag.
var p = document.createElement("P");p.textContent = "A new Paragraph!";p.style.fontSize = "16px";console.log(p);// let us decide where we want to add itvar li = document.querySelectorAll("li")[0];var a = li.firstElementChild;li.insertBefore(p,a);
So, this is how we can add the elements at different places of our document.
No comments:
Post a Comment