- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如何使用 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/
我有这个代码。选择文本时,将出现一个包含颜色的 div。单击其中一种颜色时,所选文本将包含该突出显示。但是,如何检查突出显示是否在另一个突出显示内部?如果突出显示位于另一个突出显示内部,我希望出现一个
我正致力于将纯 JS 文本突出显示脚本转换为 jQuery,但我试图找出与 insertNode 等效的 jQuery 是什么: var selection = window.getSelection
我正在创建一个 chrome 扩展。基本上,如果用户单击内容菜单选项,我想在所选文本前后插入 HTML 格式标签。 标签被添加到一个事件页面中,在添加格式标签之后,将新值触发到消息对象的“粘贴”键中的
我有以下方法在插入符号位置粘贴一些 HTML,使用 `range.insertNode(),源自 this SO answer function insertAtCursor(html) {
这是一个旨在在基本链表末尾插入新节点的函数。 node *insert(node *head, int data) { if (head == NULL) return create
有谁知道如何将浏览器选择设置为新/独立创建的范围?我了解如何从浏览器中获取文本选择,我了解如何创建范围,但我不知道如何告诉浏览器将选择更改为我创建的范围。我原以为它会是类似“setSelection”
为了兼容性,我使用 Rangy 在 WYSIWYG 编辑器 (uEditor) 中插入节点。 它可以工作,但是在 IE Some text //Javascript
如何使用 Range.insertNode() 将 IMG 元素动态插入到 DOM 中? 我的 HTML: 我的JS: var button = docu
我创建了自己的指令,如果用户未登录则隐藏内容:*onlyUser。当我尝试在使用 ng/animation 的组件中使用它时,有时会出现错误: Cannot read property 'insert
当使用 insertNodes 时,将为节点创建一个唯一的 ID。 insertNodes(addSelected, data, before, anchor) 我们如何为新节点指定一个特定的名称/文
我正在尝试在当前选择的正下方添加一个新行,然后将选择放到新行中。 let current_path = props.selection.anchor.path[0] Transforms.insert
我正在开发一个 contenteditable div 来制作一个简单的 RichText 编辑器。我的要求之一是能够在按钮事件的光标位置插入 html block 。 通过使用 range、sele
我正在制作一个代码,我必须插入一个带有随机数的节点并按顺序删除每个数字。我已经完成了其他功能,我正在尝试编写 void InsertNode(int a) 和 void DeleteNode(int
我是一名优秀的程序员,十分优秀!