html - Information icon on button created using javascript

I have created a button in javascript. Now I can add button text on to it but with information icon.

I have created a button using javascript like this

<script>
function myFunction() {
 var x = document.createElement("BUTTON");
 var t = document.createTextNode("Click me");
 x.appendChild(t);
 document.body.appendChild(x);
}
</script>

Now, I know &#9432 is html entity of information icon

<button style="font-size:24px">Click me&#9432</button>

This is the output from this code

The above code will produce the required thing i.e button name + icon.

but if i do this

var t = document.createTextNode("Click me"+"&#9432");

it will not work.It will print text(&#9432) only on button.I want to achieve same thing in javascript created button using javascript only.

I have also tried

x.classList.add("fa fa-info-circle fa-6")

font awesome class for info icon but it throws error.

Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('fa fa-info-circle fa-6') contains HTML space characters, which are not valid in tokens.

Is there any way to use html entities in javascript or any other simpler method to achieve the same.

Thanks,

I have created a button in javascript. Now I can add button text on to it but with information icon.

I have created a button using javascript like this

<script>
function myFunction() {
 var x = document.createElement("BUTTON");
 var t = document.createTextNode("Click me");
 x.appendChild(t);
 document.body.appendChild(x);
}
</script>

Now, I know &#9432 is html entity of information icon

<button style="font-size:24px">Click me&#9432</button>

This is the output from this code

The above code will produce the required thing i.e button name + icon.

but if i do this

var t = document.createTextNode("Click me"+"&#9432");

it will not work.It will print text(&#9432) only on button.I want to achieve same thing in javascript created button using javascript only.

I have also tried

x.classList.add("fa fa-info-circle fa-6")

font awesome class for info icon but it throws error.

Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('fa fa-info-circle fa-6') contains HTML space characters, which are not valid in tokens.

Is there any way to use html entities in javascript or any other simpler method to achieve the same.

Thanks,

Share Improve this question asked Jan 8, 2019 at 13:46 Shubhank Gupta 8252 gold badges14 silver badges34 bronze badges

Get rid of the '+' between the strings "Click me" "&#9432" will work same as "Click me &#9432" should also work. – SPlatten Commented Jan 8, 2019 at 14:09
I tried that also but that doesn't work. Thanks for suggestion – Shubhank Gupta Commented Jan 8, 2019 at 18:29
After trying "Click me" "&#9432" it throws error "Uncaught SyntaxError: missing ) after argument list" and "Click me &#9432" print the text as it is. Thanks, – Shubhank Gupta Commented Jan 9, 2019 at 6:11
Can you post your updated code as I'm curious to see why you are getting missing ). – SPlatten Commented Jan 9, 2019 at 7:07
<body> <button onclick="myFunction()">try</button> </body> <script> function myFunction() { var x = document.createElement("BUTTON"); var t = document.createTextNode("Click me" "&#9432"); x.appendChild(t); document.body.appendChild(x); } </script> I tried this code on www.w3schools. and was getting error. – Shubhank Gupta Commented Jan 9, 2019 at 7:09

| Show 1 more ment

3 Answers 3

Sorted by: Reset to default 3

You can either change the innerHTML of the button instead of creating a text node, since text nodes display text as-is:

<button onclick="myFunction()">ADD ANOTHER BUTTON</button>

<script>
  function myFunction() {
    var x = document.createElement("button");
    x.innerHTML = "Click me &#9432;"
    document.body.appendChild(x);
  }
</script>

Or, you can use the unicode value of the character, in your case, it's \u24d8:

<button onclick="myFunction()">ADD ANOTHER BUTTON</button>

<script>
  function myFunction() {
    var x = document.createElement("button");
    var t = document.createTextNode("Click me \u24d8");
    x.appendChild(t);
    document.body.appendChild(x);
  }
</script>

Here is what you should change to make it work for font awesome:

x.classList.add("fa", "fa-info-circle", "fa-6");

Docs link for classList methods: https://developer.mozilla/en-US/docs/Web/API/Element/classList#Methods

Final Result

function myFunction() {
    var x = document.createElement("BUTTON");
    var t = document.createTextNode("Click me");
    x.classList.add("fa", "fa-info-circle", "fa-6");
    x.appendChild(t);
    document.body.appendChild(x);
}

The createTextNode method creates a text node and shows contents as plain text. To display HTML, you need to use the innerHTML property. Also, you missed the semicolon.

function createButton(html) {
  var btn = document.createElement('button');
  btn.innerHTML = html;
  document.body.appendChild(btn);
}

createButton('Click me &#9432;');

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Information icon on button created using javascript - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)