[英]Dynamic select box and dynamic DIV, set element as opposed to remove/append
我正在创建一个动态选择框,更改时,文本部分将填充数据。 我宁愿将数据设置为某些文本,而不是追加。
例如:
更改选择框时将调用此函数:
function createDetails(...) {
var details = document.getElementById("detailsDIV");
var docFragment = document.createDocumentFragment();
containerDiv = document.createElement("div");
// Create five div sections with the text for the details section
var nameTextNode = createTextDivSect(nameStr);
var phoneTextNode = createTextDivSect("Phone: " + phoneStr);
var faxTextNode = createTextDivSect("Fax: " + faxStr);
var websiteTextNode = createTextDivSect("Website: " + websiteStr);
var emailTextNode = createTextDivSect("Email: " + emailStr);
// Append the text sections to the container DIV
containerDiv.appendChild(nameTextNode);
containerDiv.appendChild(phoneTextNode);
containerDiv.appendChild(faxTextNode);
// Add the container div to the doc fragment
docFragment.appendChild(containerDiv);
// Add the doc fragment to the div
details.appendChild(docFragment);
}
////
通过这种方法,假设我要附加到一节。 有没有办法我可以让孩子坐下来。 我想我可以删除孩子,然后设置它。 但是我认为那会浪费资源。
如果您想一次设置整个div而不使用innerHTML,则可以使用replaceChild()
:
function createDetails(...) {
var details = document.getElementById("detailsDIV");
var docFragment = document.createDocumentFragment();
// Process docFragment here...
var parentNode = details.parentNode;
parentNode.replaceChild(docFragment, details);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.