Javascript 如何临时容纳任意dom节点

我在KnockoutJS中做了一些高级工作，在KO过程之外生成一些html，对它们应用绑定，然后将它们插入到我的页面中

问题在于如何容纳新的html。我的html是几个表行，当我这样做时

var div = document.createElement('div');
div.innerHTML = template(viewModel);

div去掉了所有的表内容（my

tr

和

td

标记），这大概是因为div不能包含表行

我目前的解决办法如下：使用tbody。但我想要更一般化一点的。我想使用一个文档片段，但似乎没有设置innerHTML属性

处理这个问题的首选方法是什么

var div = document.createElement('tbody');
div.innerHTML = template(viewModel);
ko.applyBindingsToDescendants(bindingContext, div);

$(element).after($(div).contents());

---

作为一种解决方法，您可以获取父节点的类型，创建一个空的分离的该类型的新节点来存放您的内容，然后从那里获取项目

如果您不介意在

元素

之前而不是之后插入内容，它可能看起来像这样：

var container = document.createElement(element.parentNode.tagName),
    frag = document.createDocumentFragment();

container.innerHTML = template(viewModel);
ko.applyBindingsToDescendants(bindingContext, container);
while (container.childNodes.length){
    frag.appendChild(container.childNodes[0]);
}
element.parentNode.insertBefore(frag, element);

---

但最好先弄清楚内容被剥离的原因。

作为一种解决方法，您可以获取父节点的类型，创建一个空的、分离的、该类型的新节点来存放内容，然后从那里获取项目

如果您不介意在

元素

之前而不是之后插入内容，它可能看起来像这样：

var container = document.createElement(element.parentNode.tagName),
    frag = document.createDocumentFragment();

container.innerHTML = template(viewModel);
ko.applyBindingsToDescendants(bindingContext, container);
while (container.childNodes.length){
    frag.appendChild(container.childNodes[0]);
}
element.parentNode.insertBefore(frag, element);

---

但是最好先弄清楚为什么你的内容会被剥离。

我想你只会在表格部分遇到这个问题

因此，您可以这样做：

var templ = template(viewModel);
var newElement = document.createElement(
                     $(templ).is("tr, tbody, thead") ? 'table' : 'div'
                 ); 
newElement.innerHTML(templ);

---

我想你只会在桌子部件上遇到这个问题

因此，您可以这样做：

var templ = template(viewModel);
var newElement = document.createElement(
                     $(templ).is("tr, tbody, thead") ? 'table' : 'div'
                 ); 
newElement.innerHTML(templ);

---

Nit的答案是可行的，但它仍然有点像黑客，我会使用自定义模板源代码

首先，您需要创建一个使用字符串作为源的引擎，如

var stringTemplateSource = function (template) {
        this.template = template;
};

stringTemplateSource.prototype.text = function () {
    return this.template;
};

var stringTemplateEngine = new ko.nativeTemplateEngine();
stringTemplateEngine.makeTemplateSource = function (template) {
    return new stringTemplateSource(template);
};

然后可以从自定义绑定中使用它，如

ko.renderTemplate(template, bindingContext.createChildContext(data), { templateEngine: stringTemplateEngine }, element, "replaceChildren");

---

WARE

template

是一个包含实际html的字符串

Nit的答案是可行的，但它仍然有点像黑客，我会使用自定义模板源代码

首先，您需要创建一个使用字符串作为源的引擎，如

var stringTemplateSource = function (template) {
        this.template = template;
};

stringTemplateSource.prototype.text = function () {
    return this.template;
};

var stringTemplateEngine = new ko.nativeTemplateEngine();
stringTemplateEngine.makeTemplateSource = function (template) {
    return new stringTemplateSource(template);
};

然后可以从自定义绑定中使用它，如

ko.renderTemplate(template, bindingContext.createChildContext(data), { templateEngine: stringTemplateEngine }, element, "replaceChildren");

---

WARE

template

是一个包含实际html的字符串

作为一种解决方法，您可以获取父节点的类型，创建一个空的分离的该类型的新节点来存放您的内容，然后从那里获取项目。但是最好先弄清楚为什么你的内容会被剥离。@Nit-这其实不是个坏主意。你能把它作为答案发布吗？看起来这取决于你如何设置html愚蠢的问题1：既然你添加了表行，为什么你要创建一个div而不是一个表？？愚蠢的问题2：如果你想创建一个div，为什么要创建表行而不是创建div？@GôTô-我想创建任意内容，可以是任何内容。这次正好是表行。我想快速创建内容，然后将其附加到dom中。坦白地说，我认为Nit的评论可能是最好的答案。作为一种解决方法，您可以获取父节点的类型，创建一个空的分离的该类型的新节点来存放您的内容，然后从那里获取项目。但是最好先弄清楚为什么你的内容会被剥离。@Nit-这其实不是个坏主意。你能把它作为答案发布吗？看起来这取决于你如何设置html愚蠢的问题1：既然你添加了表行，为什么你要创建一个div而不是一个表？？愚蠢的问题2：如果你想创建一个div，为什么要创建表行而不是创建div？@GôTô-我想创建任意内容，可以是任何内容。这次正好是表行。我想快速创建内容，然后将其附加到dom中。坦白地说，我认为Nit的评论可能是最好的答案。谢谢你提供的信息。好东西，当然，但我这里的全部观点是，对于性能密集型的东西，完全消除淘汰。是的，整个过程是一个黑客程序，但是速度非常快。“对它们应用绑定”你仍然对它们应用绑定吗？不会在那里走动吗？谢谢你的信息。好东西，当然，但我这里的全部观点是，对于性能密集型的东西，完全消除淘汰。是的，整个过程是一个黑客程序，但是速度非常快。“对它们应用绑定”你仍然对它们应用绑定吗？你不会在那里走动吗？