使用 JavaScript 在父級中添加 HTML 標簽

Question

我需要使用 JS 將子 HTML 標記添加到沒有 ID 或類的父級（因此我需要將父級目標向上）。

這是我所擁有的：

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

這是我需要的：

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

有什么幫助嗎？ 謝謝。

Answer 1

訪問父母的孩子：

 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>

或者直接查詢元素：

 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

如果允許使用 jQuery

 $('.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

使用 document.getelementbyid 創建一個新的 div，然后在該 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); 
            }