Creates element to the HTML DOM

Question

This is my script

var item = document.createElement('LI');
var title = document.createElement('A');
title.href = '#';
title.className = 'service-tag';
title.innerHTML = titleText;
item.appendChild(title);
panel.appendChild(item);

Script above will create html code like this

 <li><a href="#" class="service-tag">Some title</a></li>

with titleText is Some title

So I want create below html code like

<li data-genre="Some title"><a href="#" class="service-tag">Some title</a></li>

How can I add data-genre="Some title" into <li> like html code above?

Syed mohamed aladeen · Accepted Answer · 2019-04-19 04:23:31Z

1

Try this,

  var titleText = "something";
  var panel = document.getElementById('panel');
  var item = document.createElement('LI');
  att = document.createAttribute("data-genre");
  att.value = "some";
  item.setAttributeNode(att);
  var title = document.createElement('A');
  title.href = '#';
  title.className = 'service-tag';
  title.innerHTML = titleText;
  item.appendChild(title);
  panel.appendChild(item);

answered Apr 19, 2019 at 4:23

Syed mohamed aladeen

6,8134 gold badges36 silver badges60 bronze badges

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

Comments

Oram · Accepted Answer · 2019-04-19 04:21:58Z

1

You need to use setAttribute

item.setAttribute("data-genre", "Some title");

var panel = document.createElement('UL');
var titleText = "some title";
var item = document.createElement('LI');
item.setAttribute("data-genre", "Some title");
var title = document.createElement('A');
title.href = '#';
title.className = 'service-tag';
title.innerHTML = titleText;
item.appendChild(title);
panel.appendChild(item);
document.body.appendChild(panel);

edited Apr 19, 2019 at 4:21

answered Apr 19, 2019 at 4:16

Oram

1,7012 gold badges19 silver badges24 bronze badges

Comments

Fokrule · Accepted Answer · 2019-04-19 04:25:37Z

0

You can try this one.

var item = document.createElement('LI');
var title = document.createElement('A');
title.setAttribute('data-genre', 'Some title')
title.href = '#';
title.className = 'service-tag';
title.innerHTML = titleText;
item.appendChild(title);
panel.appendChild(item);

What you missed is, setAttribute. You can set any attribute using this.

answered Apr 19, 2019 at 4:25

Fokrule

8322 gold badges11 silver badges32 bronze badges

Collectives™ on Stack Overflow

Creates element to the HTML DOM

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related