Question

我有一个div元素。我将在此div中复制粘贴一些文字。然后，点击创建按钮后，将在div内创建另一个div，其中包含所选文字。新的div将具有不同的背景颜色，不同的字体和其他样式属性。但我的代码不起作用。请帮我弄清楚错误。谢谢！

<html>
<head>
    <title>select</title>
    <style>
    </style>
</head>
<body>
    <script>
        function changeit(){
            var slctn = document.getSelection();
            var strings = slctn.toString();
            alert(strings);
            var get_id = document.getElementById("myspace");
            var elem = document.createChild("div");
            var design = document.createAttribute("style");
            design.value = "background-color:white;color:red;font-weight:bold;font-style:italic;font-family:CURSIVE;";
            elem.setAttributeNode(design);
            elem.createTextNode(now);
            get_id.appendChild(elem);
            alert("it is done");
        }
    </script>
    <div contenteditable="true" width="400px" height="500px" style="background-color:pink;display:block;" id="myspace">ddd</div>
    <input type="button" value="select" onClick="changeit();">
</body>
</html>

Answer 1

<script>
function changeit(){
var slctn=document.getSelection();
var strings=slctn.toString();
alert(strings);
document.getElementById("myspace").appendChild('<div style="background-color:white;color:red;font-weight:bold;font-style:italic;font-family:CURSIVE;">'+document.getElementById("myspace").innerHTML+'</div>');
}
</script>

作品？

Answer 2

对于create div元素，您应该使用

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

而不是

var elem = document.createChild("div");

并createTextNode执行document之类的内容

document.createTextNode('now');

工作DEMO

动态div包含另一个div中的选定文本

2 个答案: