logo标签列表

在Javascript中创建一个HTMLdivElement对象

javascript
3
尝试将字符串转换为HTMLDivElement对象。我知道如何创建字符串，但不确定如何创建HTMLDivElement。
例如，如果我想将<div id="cardId" class="card c9"></div>转换为HTMLDivElement对象。
同时了解HTMLDivElementObject的含义也很重要。
编辑：
我还知道有通用属性，例如id（字符串），style（对象），title（字符串）和className（字符串）。
以下是我的函数和方法。正如您所看到的，我尝试创建toElement方法。我需要的是该方法返回表示卡片的HTMLDivElement对象。需要返回的示例与上述相同<div id="cardId" class="card c9"></div>。
var cardProto = {
// creates the HTML string representing this element
    "toString": function (){
        var s = this.card.getSuit(), r = this.card.getRank();
        var t = "<div class=\"card ";
        t += s !== undefined ? s + r : "down";
        t += "\" id=\""+ this.id + "\"></div>\n";
        return t;
    },

    "toElement": function () {


    }
};
1
document.createElement("div"); - Developer
我无法理解您的意思，能否提供源代码？ - soundhiraraj
你需要使用 @undefined 的答案以及JavaScript的方法set attribute等进行解构和重构。 - Phix
5个回答
3
"toElement": function () {
  var dummy = document.createElement("div");
  dummy.innerHTML = this.toString();
  return dummy.children[0];
}
0
大家好，我已经解决了。要设置ID，我需要使用.id，而对于类，则需要使用.className。
"toElement": function () {

    var s = this.card.getSuit(), r = this.card.getRank();

    var div = document.createElement('div');
    div.id = 'cardId';
    div.className = "card " +s+r;

    return div;

}
你需要在 div 中添加 id 和 class 吗？这样做正确吗？ - soundhiraraj
不，这个没问题。它将Id设置为cardId，类名设置为card加上s和r的内容。 - TheCrownedPixel
0
假设你想将一个字符串转换为元素，你可以使用正则表达式来实现：
"toElement": function () {
    var string = '<div id="cardId" class="card c9"></div>'

    var e = /<(.+?)\s/g.exec(string)[1];
    var id = /id="(.+?)"/g.exec(string)[1];
    var cls = /class="(.+?)"/g.exec(string)[1];
    var element = document.createElement(e);
    element.hash = id;
    element.className = cls;
}
0
<!DOCTYPE html>
<html>
<head>
<script>
class Dartagnan extends HTMLDivElement{
constructor(align,text){
super(align);
this.textContent = text;
this.align = align;
this.style = "color:red;font-Weight:bold;font-Style:italic;";
this.contentEditable="true";
this.innerHTML += "<p style=color:blue;>aaaaaaaaaaa</p>";
}
};
customElements.define("test-div",Dartagnan,{extends:"div"});
</script>
</head>
<body>

<script>
var myDiv = new Dartagnan("right","xxxxxxxxxxxxxxxxxxxx");
document.body.appendChild(myDiv);
</script>
</body>
</html>

这是一个可用的代码片段。

https://jsfiddle.net/zpa5bs9v/

0
<!DOCTYPE html>
<html>
<head>
<script>
customElements.define("sw-finn",class extends HTMLDivElement { connectedCallback(){
this.align = "right";
this.innerHTML = `<div contenteditable>xxxxx</div>`;
this.style.color = "red";
this.style.fontWeight = "bold";
}},{extends:"div"});
</script>
</head>
<body>
<div is='sw-finn'>aaaaa</div>
</body>
</html>

这是一个正在运行的 Fiddle。

https://jsfiddle.net/7qzya0kc/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接