如何使用 Range.insertNode() 将 IMG 元素动态插入到 DOM 中?
我的 HTML:
<div class="css_class_for_div" style="height: 250px;" contenteditable="true">
<img src="/path/to/my/image/myimage.png" alt="/myimage.png" title="/myimage.png" class="css_class_for_image" e_resid="/myimage.png" />
<br />
<br />
<span class="css_class_for_span"></span>
</div>
<input id="myButton" type="button" value="insert image" />
我的JS:
var button = document.getElementById("myButton");
button.addEventListener("click", function(e){
var src = "/path/to/my/other/image/image2.png";
var title = "/image2.png";
var cssClassname = "css_class_for_image";
var list = document.getElementsByClassName("css_class_for_div");
var el = list[0];
var selRanges = el.getSelection();
if (selRanges.rangeCount > 0) {
var curRange = selRanges.getRangeAt(0); // Range object
if (curRange.toString().length == 0) {
var imageNode = document.createElement('img');
imageNode.src = src;
imageNode.alt = title;
imageNode.title = title;
imageNode.className = cssClassname;
curRange.insertNode(imageNode);
}
}
},false);
上面的代码不起作用。如有任何帮助,我们将不胜感激。
最佳答案
如果您只想将 Image2 插入到 classname = css_class_for_div 的第一个出现的 div 中,使用 Range.InsertNode() ,您可以使用以下代码。
我必须使用
var range = document.createRange();
range.selectNode(your div);
range.insertNode(your image);
var button = document.getElementById("myButton");
button.addEventListener("click", function (e) {
debugger;
var range = document.createRange();
var list = document.getElementsByClassName("css_class_for_div");
if (list.length > 0) {
var el = list[0];
range.selectNode(el);
var imageNode = getImageNode();
range.insertNode(imageNode);
}
}, false);
function getImageNode() {
var src = "/path/to/my/other/image/image2.png";
var title = "/image2.png";
var cssClassname = "css_class_for_image";
var imageNode = document.createElement('img');
imageNode.src = src;
imageNode.alt = title;
imageNode.title = title;
imageNode.className = cssClassname;
return imageNode;
}
关于javascript - 使用 Range.insertNode() 动态添加图像到 DOM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30645641/