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="">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="">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.

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.

• javascript
• html

• Save it as string, then you can append it to somewhere. But what do you want to do with it? – maximelian1986 Commented Mar 16, 2017 at 7:50
• have you tried anything? – Akshay Khandelwal Commented Mar 16, 2017 at 7:50
• 1 var html = '<p>Test</p>' ... 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 Commented Mar 16, 2017 at 7:50
• 1 @AkshayKhandelwal Whatever I tried I pasted. – David Commented Mar 16, 2017 at 7:51
• @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 Commented Mar 16, 2017 at 7:52

8 Answers 8

    
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>

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>

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.

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

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.

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

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.

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