Creating a HTMLdivElement object in Javascript

Question

Trying to turn a String into a HTMLDivElement object. I know how to create a string, I am just unsure how to create the HTMLDivElement.

For example, if I wanted to turn <div id="cardId" class="card c9"></div>

It would also be good to really understand what a HTMLDivElementObject is too.

EDIT:

I also know that there are Universal Attributes such as id(string), style(object), title(string) and className(string).

Below is my function and method. As you can see I try to create the toElement method. What I need is the method to return an HTMLDivElement object representing the Card. The example of what needs to be returned is as above <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 () {


    }
};

You'd need to deconstruct and reconstruct using @undefined answer and the js methods set attribute etc — Phix
– Phix, Commented Oct 29, 2014 at 5:19

lloiser · Accepted Answer · 2014-10-29 05:21:00Z

4

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

answered Oct 29, 2014 at 5:21

lloiser

1,1919 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TheCrownedPixel · Accepted Answer · 2014-10-29 05:30:18Z

0

Figured it out guys. to set the Id, I needed to use .id, and .className for the class.

"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;

}

answered Oct 29, 2014 at 5:30

TheCrownedPixel

3691 gold badge7 silver badges18 bronze badges

2 Comments

soundhiraraj Over a year ago

do u need to append id and class with in div?is it correct?

TheCrownedPixel Over a year ago

No, this works fine. It sets the Id as cardId and the class name as card plus the contents of s and r.

Weafs.py · Accepted Answer · 2014-10-29 05:32:40Z

0

Assuming that you want to convert a string into an element, you can use RegEx to do this:

"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;
}

answered Oct 29, 2014 at 5:32

Weafs.py

23k9 gold badges58 silver badges80 bronze badges

Comments

D'Artagnan · Accepted Answer · 2023-05-03 13:21:24Z

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>

This is a working fiddle.

https://jsfiddle.net/zpa5bs9v/

edited May 3, 2023 at 13:21

answered Apr 19, 2023 at 8:54

D'Artagnan

213 bronze badges

Comments

D'Artagnan · Accepted Answer · 2023-05-03 13:22:16Z

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>

This is a working fiddle.

https://jsfiddle.net/7qzya0kc/

edited May 3, 2023 at 13:22

answered Apr 19, 2023 at 10:48

D'Artagnan

213 bronze badges

Collectives™ on Stack Overflow

Creating a HTMLdivElement object in Javascript

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related