在Javascript中创建HTMLDivElement对象

7xllpg7q 于 2023-05-05 发布在 Java

关注(0)|答案(5)|浏览(173)

尝试将String转换为HTMLDivElement对象。我知道如何创建一个字符串，我只是不确定如何创建HTMLDivElement。
例如，如果我想把<div id="cardId" class="card c9"></div>
真正理解HTMLDivElementObject是什么也是很好的。
编辑：
我还知道有一些通用属性，如id（string）、style（object）、title（string）和className（string）。
下面是我的函数和方法。如你所见，我尝试创建toElement方法。我需要的是返回表示Card的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 () {

    }
};

JavaScript

来源：https://stackoverflow.com/questions/26623150/creating-a-htmldivelement-object-in-javascript

5条答案

按热度按时间

fafcakar1#

"toElement": function () {
  var dummy = document.createElement("div");
  dummy.innerHTML = this.toString();
  return dummy.children[0];
}

赞(0）回复(0）举报 2023-05-05

bnl4lu3b2#

我明白了伙计们。要设置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;

}

赞(0）回复(0）举报 2023-05-05

myss37ts3#

假设你想把一个字符串转换成一个元素，你可以使用RegEx来完成：

"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）回复(0）举报 2023-05-05

pxyaymoc4#

<!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）回复(0）举报 2023-05-05

owfi6suc5#

<!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>

这是一把能用的小提琴。
https://jsfiddle.net/7qzya0kc/

赞(0）回复(0）举报 2023-05-05

我来回答

在Javascript中创建HTMLDivElement对象

5条答案

相关问题

热门标签

最新问答