是否可以使用setAttribute设置超链接的文本或innerText

Question

I'm trying to dynamically convert my descriptive JSON object into HTML. This is no easy task but since it's only to be used for a small project and a small team, it suits our needs.

This means, the JSON object could look like

'element': {
            'href': '#03',
            'text': 'link',
            'myUniqueTag' : 'a'
        }

This means I can use myUniqueTag and understand I'm dealing the type a . This works fine.

The issue I have is setting the value of the text, which is

<a href="blah">How do I set this bit</a>

This is what I've tried

one.text = "Hello world";                           //works
two.innerText = "Hello world";                      //works
three.setAttribute("text", "Hello world");          //fails
four.setAttribute("innerText", "Hello world");      //fails

JSFIDDLE

For my situation, I have to use setAttributes. My question is, am I missing something or is it not possible to set the text via setAttribute()

Please note, I'm using vanilla JavaScript only (no JQuery or framework).

Answer 1

Of course you can use setAttribute to set the text, however you need to precise witch attribute you set. In your example "text" and "innerText" are not html attribute.

for example :

JS:

var b = document.createElement('button'); 
b.setAttribute('content', 'test content'); 
b.setAttribute('class', 'btn'); 
b.innerHTML = 'test value';

var wrapper = document.getElementById("divWrapper");
wrapper.appendChild(b);

Looks like this in the DOM:

<div id="divWrapper">
    <button content="test content" class="btn">test value</button>
</div>