Question

好像我们用它contenteditable="true"创建一个div元素，然后如果在控制台中看到它，那么

第一。在控制台中有一个简单的div标签。

<div id="typbody" contenteditable="true" style="width:100%; height:200px; border:1px solid #ccc; "></div>

第二。如果我在div标签中输入，那么在控制台中会写入<div><br></div>！

如果我写了任何东西，它也写在<div>内。

所以我的问题是：

1）有没有办法为这些新创建的div标记提供ID？ 2）是否还有办法为所有新的div提供不同的ID或类？

我是否必须学习除javascript或php以外的任何其他语言？

Answer 1

“有没有办法为这些新创建的div代码添加ID？”
“是否有任何方法可以为所有新div提供不同的ID或类别？”

是的，有！

看看MutationObserver MDN，和DOM MutationObserver – reacting to DOM changes without killing browser performance.

Demonstration with JS

(function () {
    "use strict";
    var target = document.getElementById("typbody"),
        config = {
            childList: true,
        },
        eCollection = [],
        i = 0,
        id = target.id + "_",

        observer = new MutationObserver(function (mutations) {
            mutations.forEach(function (mutation) {
                if (mutation.addedNodes) {
                    [].forEach.call(mutation.addedNodes, function (node) {
                        if (node.nodeName.toLowerCase() === "div") {
                            var index = eCollection.indexOf(node.nextSibling);
                            node.id = id + i++;
                            eCollection.push(node);
                            if (node.nextSibling && index > -1) {
                                node.id = node.nextSibling.id;
                                for (var j = index; j < eCollection.length - 1; j++) {
                                    eCollection[j].id = id + (+eCollection[j].id.substr(id.length) + 1);
                                }
                            }
                            eCollection.sort(sortC);
                        }
                    });
                }
                if (mutation.removedNodes) {
                    [].forEach.call(mutation.removedNodes, function (node) {
                        if (node.nodeName.toLowerCase() === "div") {
                            var index = eCollection.indexOf(node);
                            eCollection.splice(index, 1);
                            for (var j = index; j < eCollection.length; j++) {
                                eCollection[j].id = id + (eCollection[j].id.substr(id.length) - 1);
                            }
                            i--;
                            eCollection.sort(sortC);
                        }
                    });
                }
            });
        });

    observer.observe(target, config);

    function sortC(a, b) {
        return a.id.substr(id.length) - b.id.substr(id.length);
    }
}());

但为什么你想要这样的行为呢？如果你想为这些元素添加一些样式，为什么不简单地使用css：

Demo with CSS

#typbody > div:nth-child(odd) {
    color: green;
}
#typbody > div:nth-child(even) {
    color: blue;
}

Answer 2

创建时添加ID。如果您希望它是动态的，只需将id变量设置为动态。

var frag = document.createDocumentFragment(),
var item = document.createElement('div');
item.id = whatever;
frag.appendChild(item);

然后将frag插入到您想要的DOM中。例如，在元素'foo'之后：

foo.parentNode.insertBefore(frag, foo.nextSibling);

如何在父div中为新创建的div提供id设置模式为on

2 个答案:

是的，有！