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); 
            }

使用JavaScript在父级中添加HTML标签

3 个答案: