javascript - 在添加 DOM 之前创建一个 html 元素并通过 id 找到一个 div

Question

我正在尝试找到 ID 为 old-price 的 div 并将其删除，然后再插入文档( main.appendChild(newDiv 之前);).

p.s.: 不能使用 JQuery

我已经试过了:

newDiv.getElementById("old-price").innerHTML = "";

但它不起作用

我们将不胜感激。

var divString = "<div class='col-xs-12 col-sm-6 col-md-4 col-lg-4'>     <div class='thumbnail'>         <h1 class='text-center'> Black Shoes with red stripes </h1>         <img src='img/02.jpg'>         <small id='old-price' class='old-price'>250</small>         <p class='price'>250</p>         <a class='btn btn-primary'>BUY</a>     </div> </div> ";

var newDiv = document.createElement('div');
newDiv.innerHTML = divString;
//remove the div with id old-price
var main = document.getElementById("main");
main.appendChild(newDiv);

<div id="main">
</div>

Answer 1

使用 newDiv.querySelector("#old-price").remove()。

var divString = "<div class='col-xs-12 col-sm-6 col-md-4 col-lg-4'>     <div class='thumbnail'>         <h1 class='text-center'> Black Shoes with red stripes </h1>         <img src='img/02.jpg'>         <small id='old-price' class='old-price'>250</small>         <p class='price'>250</p>         <a class='btn btn-primary'>BUY</a>     </div> </div> ";

var newDiv = document.createElement('div');
newDiv.innerHTML = divString;
//remove the div with id old-price
newDiv.querySelector("#old-price").remove()
var main = document.getElementById("main");
main.appendChild(newDiv);

<div id="main">
</div>