Question

我正在开发一个模仿购物车的原型移动网络应用程序。我已经能够创建购物车并将产品添加到购物车。我遇到的麻烦是覆盖总成本值。我能够转换值以执行计算，但我无法覆盖存储总值的值。这是我到目前为止的代码：

<div data-role="content">
              <div class="ui-grid-b">
                <div class="ui-block-a">Title</div>
                <div class="ui-block-b">Format</div>
                <div class="ui-block-c">Price</div>
                <div class="ui-block-a"><p id = "myTitle"></p></div>
                <div class="ui-block-b"><p id = "myFormat"></p></div>
                <div class="ui-block-c"><p id = "myPrice"></p></div>
                <div class="ui-block-a"></div>
                <div class="ui-block-b"></div>
                <div class="ui-block-c"><p id="myTotal"></p></div>
               </div>   

            </div>

现在我想更新存储在“myTotal”id中的值。我有一个名为addtocart（）的函数，下面是代码：

`
var total = 0;
function addtocart() {

var title = game.Title ;
var price = game.Price ;
var format = game.Format ; 
var newParagraph = document.createElement('p');
newParagraph.textContent = title;
var newParagraph2 = document.createElement('p');
newParagraph2.textContent = format;
var newParagraph3 = document.createElement('p');
newParagraph3.textContent = price;

document.getElementById("myTitle").appendChild(newParagraph);
document.getElementById("myFormat").appendChild(newParagraph2);
document.getElementById("myPrice").appendChild(newParagraph3);

price = parseInt(price, 10);
price = total + price;
var newParagraph4 = document.createElement('p');
newParagraph4.textContent = total;

document.getElementById("myTotal").appendChild(newParagraph4);

} `

现在我知道appendChild用于向文档添加文本，但我似乎找到了一个解决方案，在添加新项目时使用存储在'total'中的新值覆盖该值。

提前致谢：）

Answer 1

使用innerHTML属性。这会将元素内的HTML设置为您设置的内容，而不是添加节点。

var newParagraph4 = "<p>" + total + "</p>";
document.getElementById("myTotal").innerHTML = newParagraph4;

这样可以减少DOM操作，并且比在DOM上创建段落然后添加它更快。

Answer 2

将.textContent更改为innerHTML：

var newParagraph4 = document.createElement('p');
newParagraph4.innerHTML = total;

用javascript </div>中的变量覆盖<div id =“”>

2 个答案: