Question

我正在尝试使用https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand详细说明的document.execCommand将自定义元素添加到可编辑的div中。

但是当我尝试使用execCommand添加自定义聚合物元素时，即使已将自定义元素导入范围，浏览器也无法识别该自定义元素。

    var video-id='FnoL3d33U8o'//a youtube video Id
    var html = '<p><div><custom-video-element width="454" height="280" video-id="'+videoUrl+'"></custom-video-element></div></p>'; 
    document.execCommand('insertHTML', false, html);

但这并没有帮助，浏览器无法识别自定义视频元素。如果有其他方法，或者如果我在海市蜃楼之后跑步，请提供帮助！

Answer 1

如果您知道需要追加的元素，则可以使用document.createElement。

如何实现这一目标有多种选择，但在您的情况下：

var p = document.createElement("p");
var div = document.createElement("div");
var custom = document.createElement("custom-video-element")
custom.setAttribute("video-id", videoUrl);
.. setting another attributes ..

div.appendChild(custom);
p.appendChild(div);
document.appendChild(p);

就是这样。这应该很好。

当然可能会有更好更简单的解决方案，但在你的情况下，这并不是那么糟糕。

如果你在JS中创建更大的html结构，你会做类似的事情：

var div = document.createElement("div");

var inner = "<div class="test"><div></div><p class="p"></p></div>;
div.innerHTML = inner;

div.querySelector(".p").appendChild(document.createElement("custom-video-element"));

无法使用document.execCommand添加自定义元素

1 个答案: