CODEWITHSUNDEEP
javascripthtml
David
David

Reputation: 4283

How to add HTML tag into JavaScript?

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

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

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.

Upvotes: 3

Views: 52050

Answers (8)

Akira San
Akira San

Reputation: 11

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

Upvotes: 1

Dan Philip Bejoy
Dan Philip Bejoy

Reputation: 4376

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>

Upvotes: 3

ArunBabuVijayanath
ArunBabuVijayanath

Reputation: 510

    
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>

Upvotes: 6

Jatin patil
Jatin patil

Reputation: 4298

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:
<p>An absolute URL: <a href="https://www.w3schools.com">W3Schools</a></p>

You will first need to create parent <p> 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 <p> tag as follows,

ptag.appendChild(anchorTag);

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

Upvotes: 1

Jonathan Zhao
Jonathan Zhao

Reputation: 151

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

Upvotes: 1

Sergio Susa
Sergio Susa

Reputation: 264

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.

Upvotes: 1

Gayathri Mohan
Gayathri Mohan

Reputation: 161

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

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

Upvotes: 1

Suresh Atta
Suresh Atta

Reputation: 122026

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.

Upvotes: 1

Related Questions