How to add HTML tag into JavaScript?

Question

I want to make use of one html tag into my javascript but don't know how to make use of that.

For ex: An absolute URL: <a href="https://www.w3schools.com">W3Schools</a>

This is my tag. I want to store this into some variable so I can make use of that later in my function. But I don't how to store it. On way I got to store like

var htm = { html : <p>An absolute URL: <a href="https://www.w3schools.com">W3Schools</a></p>}

But again this is an object I can not use the perticular anchor tag. Can anybody please suggest how to deal with it. How to store html tags in JavaScript variable or any solutions.

Save it as string, then you can append it to somewhere. But what do you want to do with it? — maximelian1986
– maximelian1986, Commented Mar 16, 2017 at 7:50
var html = 'Test' ... I don't really get what you mean otherwise? HTML would just be a string? What do you mean by "use the anchor tag"? — Seth
– Seth, Commented Mar 16, 2017 at 7:50
@maximelian1986 I want to use of anchor tag in my email body. So far I am able to add plane text which I store in variable. But for url I want to use anchor tag. — David
– David, Commented Mar 16, 2017 at 7:52

ArunBabuVijayanath · Accepted Answer · 2017-03-16 08:34:54Z

6

    
function createCustomElement(anchorText, anchorLink){
  

  var aTag = document.createElement("a");
  aTag.href = anchorLink;
  aTag.innerHTML = anchorText;
  
  return aTag ;
}

var parent = document.getElementById('para');
var customElement = createCustomElement("w3Schools", "www.w3School.com");
parent.appendChild(customElement);

<div id="para">
</div>

edited Mar 16, 2017 at 8:34

answered Mar 16, 2017 at 8:02

ArunBabuVijayanath

5104 silver badges15 bronze badges

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

7 Comments

David Over a year ago

Thanks. This is I can try. One question where should I write <div id="para"> </div>.

ArunBabuVijayanath Over a year ago

It can be any parent element to which you want to add you

David Over a year ago

Ok Sure I am trying this.

David Over a year ago

Ya I am using only a tag. No need for para. But don't know for some reason it is showing only url. no anchor text. I am debugging. once I get success, I will accept the answer.

ArunBabuVijayanath Over a year ago

Okay made the changes according to the new requirement

|

Dan Philip Bejoy · Accepted Answer · 2017-03-17 09:51:32Z

3

We can assign the string template directly by calling innerHTML on a newly created element and returning its childNode. By doing so we can add custom attributes to the new DOM element as well by adding it to the template string.

function strToElem(text, link){
  var temp = '<p> An absolute URL : <a href="'+ link + '">'+text+'</a></p>';
  var a = document.createElement("p");
  a.innerHTML = temp;
  return a.childNodes[0];
}

var parent = document.getElementById('parent');
var elem = strToElem("w3Schools", "www.w3School.com");
parent.appendChild(elem);

<div id="parent">
</div>

edited Mar 17, 2017 at 9:51

answered Mar 17, 2017 at 9:35

Dan Philip Bejoy

4,4032 gold badges20 silver badges34 bronze badges

2 Comments

David Over a year ago

Thanks for this answer, but applying this I am getting only link not text

Dan Philip Bejoy Over a year ago

Updated the code. Just change the template to suit your needs. Simple as that.

Suresh Atta · Accepted Answer · 2017-03-16 07:50:03Z

1

This is possible and you can store it as String. If you are struggling to make it work because of the quotes confusion, correct would be

var htm = { html : '<p>An absolute URL: <a href="https://www.w3schools.com">W3Schools</a></p>'}

Note the single quotes. Since you already used doubles quotes for href, you string must wrapped with single quotes.

answered Mar 16, 2017 at 7:50

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

Comments

Gayathri Mohan · Accepted Answer · 2017-03-16 07:52:54Z

1

Try using this code. Enclose your html block of code in '' and it should work.

var test = 'An absolute URL: <a href="https://www.w3schools.com">W3Schools</a>';

answered Mar 16, 2017 at 7:52

Gayathri Mohan

1611 silver badge10 bronze badges

1 Comment

David Over a year ago

But I want to be anchor tag functionality. This is working as plane string

Sergio Susa · Accepted Answer · 2017-03-16 07:53:14Z

1

I think you have to enclose that html in ' ' (for correct sitaxis) , or, second option is create an Dom object using Javascript.

https://www.w3schools.com/js/js_htmldom_nodes.asp

Then you can edit and modify as a real html not a simple string.

Hope this help you.

answered Mar 16, 2017 at 7:53

Sergio Susa

2743 silver badges7 bronze badges

Comments

Jonathan Zhao · Accepted Answer · 2017-03-16 08:13:53Z

1

I guess you can get it as a element:

var el = document.getElementById('something');

and use it in your function

there's two way to get the elemete;

-------one way------

in html

  <p id="something">An absolute URL: <a href="https://www.w3schools.com">W3Schools</a></p>

in js

var el = document.getElementById('something');

----the other way----

create a element by js

  var el =  document.createElement("p");

this is how to use the function

edited Mar 16, 2017 at 8:13

answered Mar 16, 2017 at 7:55

Jonathan Zhao

1511 silver badge8 bronze badges

1 Comment

David Over a year ago

Thanks. I read this but not sure where should I write my html code.

Jatin patil · Accepted Answer · 2017-03-16 08:21:03Z

1

You can create html element as objects in JavaScript using document.createElement() method,

To create and store following html string in JavaScript as an object:
An absolute URL: <a href="https://www.w3schools.com">W3Schools</a>

You will first need to create parent  tag as follows,

var ptag = document.createElement('p');
ptag.innerText = 'An absolute URL:';

Next you will need to create anchor tag object as follows,

var anchorTag = document.createElement('a');
anchroTag.href = 'https://www.w3schools.com';
anchorTag.innerText = 'w3Schools';

Next append anchor tag as child to  tag as follows,

ptag.appendChild(anchorTag);

This way now you can refer your object ptag and anchorTag latter.

answered Mar 16, 2017 at 8:21

Jatin patil

4,2961 gold badge20 silver badges27 bronze badges

3 Comments

David Over a year ago

Thanks for answer. Actually I drop the idea of ptag. Using only atag. I am getting the url, not anchorText. there should be innerHTML or anchorTag.innerText

Jatin patil Over a year ago

For RichtText you need yo use .innerHtml and for plain text you can use .innerText. You can use .innerHtml.

Jatin patil Over a year ago

For more details on setting and getting anchor text have a look at following page, w3schools.com/jsref/prop_anchor_text.asp

Akira San · Accepted Answer · 2023-01-30 08:40:12Z

1

<div class='container'>
    <h1>Hi mama</h1>
</div>

<script>
    const container = document.querySelector(".container");
    container.innerHTML += "<h1> hi dad</h1>"; 
</script>

//result
<div class='container'>
        <h1>Hi mama</h1>
        <h1> hi dad</h1>
    </div>

answered Jan 30, 2023 at 8:40

Akira San

111 silver badge1 bronze badge

Collectives™ on Stack Overflow

How to add HTML tag into JavaScript?

8 Answers 8

7 Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

7 Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related