CODEWITHSUNDEEP
javascripthtml
user6642297
user6642297

Reputation: 393

How can I use a Javascript variables inside a HTML tag?

I am trying to use h(1-6) tags. Is there any way if I can use one regular expression or variable to print the tags on the screen.

<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>

Instead of using all I want to use one variable or a regular expression, for example:

<h1-6>Heading</h1-6>
<h$>Heading</h$>

Any help is appreciated.

Upvotes: 0

Views: 2770

Answers (5)

Tryah85
Tryah85

Reputation: 371

do/while loops just makes sure the while loop runs (such as the condition is always false) and it seems it never uses the loop.

Propery to use clean code I would use the heading tags in HTML, use CSS for the styles, JavaScript for complex processes for both. This is not complex enough.

Something like


var head = 0;
while(head<5) {
    print '<h' .head;'.>Heading</h'.head;'>
    head ++;
}

to print the code in HTML, JavaScript has to convert tags with

document.getElementById(h1);

Upvotes: 0

rahul k
rahul k

Reputation: 61

<script>
        function multiply()
        {
                            var result=0;
            for(var number=0;number<=10;number++)
            {
                result= number*9;

                document.write(number+"*"+9+" = "+result);
                document.write("<br>");
                                    console.log(number+"*"+9+" = "+result);
                                    
                                    document.write("<h3>"+number+"Table</h3>");
                                    for(var number2=1;number2<=10;number2++)
                                    {
                                    result=number*number2;
                                    
                               document.write(number+"*"+number2+"="+result);
                                document.write("<br>");
                                  console.log(number+"*"+number2+"="+result);
                                    }
                                    document.write("<br>");
            }
            
            
        }
        multiply();

    </script>

document.write("<h3>"+number+"Table</h3>"); = this way we can print a variable inside heading

Upvotes: 0

Ryland Goldman
Ryland Goldman

Reputation: 105

You could use the document.createElement() function to create the HTML tags:

var e = document.createElement("h1");
e.innerHTML("heading");
document.body.appendChild(e);

Or if you wanted to make more than one:

function create(text="",type="h1"){
    var e = document.createElement(type);
    e.innerHTML(text);
    document.body.appendChild(e);
}
create("heading one","h1");
create("heading two","h2");
create("heading three","h3");
create("heading four","h4");

This would create the following:

<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>

It would also work with different types, such as <p>.

Upvotes: 0

Tigger
Tigger

Reputation: 9130

It would be easier and less complex to just write the HTML.

If you really wanted to do it dynamic, the following works.

window.onload = function(){
  var d = document.getElementById("out");
  var h, i, max = 7;
  for(i=1;i<max;i++) {
    h = document.createElement("h"+i);
    h.textContent = "Heading";
    d.appendChild(h);
  }
}
<div id="out"></div>

Upvotes: 2

James Gaunt
James Gaunt

Reputation: 14783

The simple answer is no. Not in the way you indicate using native javascript variables. HTML is static text.

You would either need to write some JavaScript such as this (where v is a global variable you set earlier)

<script type='text/javascript'>document.write("<h" + v + ">Heading</h" + v + ">")</script>

Or using some sort of framework (jquery/react/angular) to achieve essentially the same in a way that is appropriate for that framework.

Dynamically rendering content is what these kind of frameworks are all about.

Depending on what you are trying to achieve it may also make more sense to do this all on the server side.

Upvotes: 1

Related Questions