Add HTML tag inside parent using JavaScript

Question

I need to add a child HTML tag using JS to a parent without an ID or class (so I need to target the parent level up).

Here is what I have:

<div class="parent">
  <lavel>
    <input type="radio">
  </label>
</div>

Here is what I need:

<div class="parent">
  <lavel>
    <input type="radio">
    <span class="child-span">content</span>
  </label>
</div>

Any help? Thx.

Answer 1

Access the children of the parent:

 const el = document.createElement('span') el.classList.add('child-span') el.innerText = 'Hello!' document.querySelector('.parent').children[0].appendChild(el)

 <div class="parent"> <label> <input type="radio"> </label> </div>

Or query the element directly:

 const el = document.createElement('span') el.classList.add('child-span') el.innerText = 'Hello!' document.querySelector('.parent label').appendChild(el)

 <div class="parent"> <label> <input type="radio"> </label> </div>

Answer 2

IF jQuery is allowed

 $('.parent label').append('<span class="child-span">content</span>');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent"> <label> <input type="radio"> </label> </div>

Answer 3

Use document.getelementbyid to create a new div and then add what is required in that div.

Var newDiv = document.createElement("div"); 
                 //and give it some content 
                var newContent = document.createElement("");
                 //add the text node to the newly created div
                newDiv.appendChild(newContent);  
                //add the newly created element and its content into the DOM 
   var currentDiv = document.getElementById(""); 
            document.body.insertBefore(newDiv, currentDiv); 
            }