需要帮助将 appendChild 更改为 replaceChild

Question

有没有简单的方法可以将其从 appendChild 更改为 replaceChild？

这当然是不断增加更多的元素。同样出于某种原因，它没有将值放在 DIV 或 SPAN 中，似乎放在它下面。

var para = document.createElement("P");
var total = document.createTextNode(parseFloat((subT + tax).toFixed(2))) ;

para.appendChild(total);

document.getElementById("total_id").appendChild(para);

正在更新：

<div class="prod_totals">Order Total: $<span id="total_id"></span></div>

Answer 1

您可以简单地使用 innerHTML 而不是 appendChild

document.getElementById("total_id").innerHTML = parseFloat((subT + tax).toFixed(2));

因为您没有在 total_id 元素中插入任何用户输入值，而且就问题提到的而言，它的数据稍后不会传递到服务器我认为您可以安全地使用innerHTML 这里。但是如果出于任何原因你仍然想使用 replaceChild 你可以这样做：

var para = document.createElement("P");
var total = document.createTextNode(parseFloat((subT + tax).toFixed(2))) ;

para.appendChild(total);

var existingText=document.getElementById("total_id").querySelector('p');
if(existingText){
    document.getElementById("total_id").replaceChild(existingText, para);
}
else{
    document.getElementById("total_id").appendChild(para);
}

Answer 2

此处不需要使用.replaceChild，您可以在尝试更新之前检查element是否已经创建。

请注意，您试图在 span 中插入 p 元素，这是错误的并且 无效 HTML 标记 ，你可以在 the span documentation that its possible content is only Phrasing content 中看到，所以你最好使用另一个 span.

你的代码应该是这样的：

var para = document.querySelector("#total_id span");
if (!para || para.length == 0) {
  para = document.createElement("span");
}
var total = parseFloat((subT + tax).toFixed(2));
para.innerText = total;
document.getElementById("total_id").appendChild(para);

这是一个演示：

var para = document.querySelector("#total_id span");
if (!para || para.length == 0) {
  para = document.createElement("span");
}
var total = new Date();

para.innerText = total;

document.getElementById("total_id").appendChild(para);

<div class="prod_totals">Order Total: $<span id="total_id"></span></div>

需要帮助将 appendChild 更改为 replaceChild

Need help changing appendChild to replaceChild

html

javascript

dom

appendchild