How to create html component in javascript

Question

I wanted to create my html component in javascript. Is there any way I can get this div part from javascript function.

My html code

<body>
    <h2>My Customers</h2>
    <input type="text" id="myInput" onkeyup="myFunction()" title="Type in a name">
    <table id="myTable">
      <tr class="header"></tr> 
      <tr><td>Germany</td></tr>
      <tr><td>Sweden</td></tr>
      <tr><td>UK</td></tr>
      <tr><td>Germany</td></tr>
      <tr><td>Canada</td></tr>
      <tr><td>Italy</td></tr>
      <tr><td>UK</td></tr>
      <tr><td>France</td></tr>
    </table>
</body>

@MantasČekanauskas I am passing on div by id by using that id I want to create this table by using javascript. — David
– David, Commented May 4, 2017 at 9:46
multiple ways, out of which the easiest one, but the not cleanest one is to simply use .innerHTML property and write your entire table in a string that follows. document.getElementById("yourDIV").innerHTML = '<table id="someID">' is an example, just keep piling on. — Dellirium
– Dellirium, Commented May 4, 2017 at 9:50
Or .append() is also a clean one. Had the PO been using jQuery — Jins Peter
– Jins Peter, Commented May 4, 2017 at 9:52

Jins Peter · Accepted Answer · 2017-05-04 10:32:30Z

2

This is my Tic for Tac answer.

var myFunction = function(){

        var div = document.getElementById("yourId");
        var myTable = '<input type="text" id="myInput" + 
          'onkeyup="myFunction()" title="Type in a name">'+
          '<table id="myTable">'+
          '<tr class="header"></tr>' +
          '<tr><td>Germany</td></tr>'+
          '<tr><td>Sweden</td></tr>'+
          '<tr><td>UK</td></tr>'+
          '<tr><td>Germany</td></tr>'+
          '<tr><td>Canada</td></tr>'+
          '<tr><td>Italy</td></tr>'+
          '<tr><td>UK</td></tr>'+
          '<tr><td>France</td></tr>'+
        '</table>';
      div.innerHTML = myTable;

    }

edited May 4, 2017 at 10:32

answered May 4, 2017 at 9:51

Jins Peter

2,4891 gold badge22 silver badges40 bronze badges

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

4 Comments

Jins Peter Over a year ago

i earlier used .append() which was jQuery. Then found jQuery was not used

David Over a year ago

Yes, but by this way I can add only table. not input.

Jins Peter Over a year ago

What input. ? you did not mension any input in the QN. On the comment below that you said you want to add table inside the div. Look at the first comment on your qn. Try to make us understand what do you really need.

David Over a year ago

yes, there is two tag input and table. I want to add both. Is it possible.

Mantas Čekanauskas · Accepted Answer · 2017-05-04 09:53:42Z

1

For appending you can use insertAdjacentHTML

Working fiddle

function myFunction(){
    var tableStr = `<table id="myTable">
        <tr class="header"></tr> 
        <tr><td>Germany</td></tr>
        <tr><td>Sweden</td></tr>
        <tr><td>UK</td></tr>
        <tr><td>Germany</td></tr>
        <tr><td>Canada</td></tr>
        <tr><td>Italy</td></tr>
        <tr><td>UK</td></tr>
        <tr><td>France</td></tr>
     </table>`;


     document.getElementById('tableContainer').insertAdjacentHTML('beforeend', tableStr)
}

answered May 4, 2017 at 9:53

Mantas Čekanauskas

2,2386 gold badges26 silver badges49 bronze badges

Comments

hvs9 · Accepted Answer · 2017-05-04 10:13:22Z

1

You can use document.createElement() like:

var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);

You can refer this link for more details

answered May 4, 2017 at 10:13

hvs9

706 bronze badges

3 Comments

David Over a year ago

Ya.. But How I will add table in that

hvs9 Over a year ago

try something like:

function(result){  		var table 		= document.createElement("TABLE");		 		var row 		= table.insertRow();		 		for( var key in result ){ 			 			var cell1 		= row.insertCell(); 			cell1.innerHTML = result[key];			 		} }

David Over a year ago

Thanks for answer. I am ttrying this

chris · Accepted Answer · 2017-05-04 09:54:18Z

0

if you are using jquery,try:

$("#yourdivid").html('Your html code above');

with javascript:

 var div1=document.getElementById('yourdivid'); 
 div1.innerHTML='Your html code above';

answered May 4, 2017 at 9:54

chris

807 bronze badges

Comments

marc_s · Accepted Answer · 2017-06-04 08:06:52Z

jQuery: this is an example from my code, the var html just makes sure u don't have to write the same piece of code over and over again.

var html = '<div class="swiper-slide">';

html += '<div class="bigIm"><a href="' + url1 + '" target="_blank" class="inner" style="background-image: url(' + img1 + ')">';
html += '<div class="imgCont-b imgCont-b-cov1">';
html += '<a href="' + url1 + '" class="t-icon"><i class="fa fa-' + d1.source.toLowerCase() + ' fa-2x tw-img" aria-hidden="true"></i></a>';
html += '<span class="tw-text">' + d1.source + '</span>';
html += '<p>' + d1.text + '</p>';
html += '</div>';            
html += '</a></div>';  

html += '<div class="bigIm">';
html += '<div class="half first"><a href="' + url2 + '" target="_blank" class="inner" style="background-image: url(' + img2 + ')">';
html += '<div class="imgCont-b imgCont-b-cov2">';
html += '<a href="' + url2 + '" class="t-icon"><i class="fa fa-' + d2.source.toLowerCase() + ' fa-2x tw-img" aria-hidden="true"></i></a>';
html += '<span class="tw-text">' + d2.source + '</span>';
html += '<p>' + d2.text + '</p>';
html += '</div>';            
html += '</a></div>';
html += '<div class="half last"><a href="' + url3 + '" target="_blank" class="inner" style="background-image: url(' + img3 + ')">';
html += '<div class="imgCont-b imgCont-b-cov3">';
html += '<a href="' + url3 + '" class="t-icon"><i class="fa fa-' + d3.source.toLowerCase() + ' fa-2x tw-img" aria-hidden="true"></i></a>';
html += '<span class="tw-text">' + d3.source + '</span>';
html += '<p>' + d3.text + '</p>';
html += '</div>';
html += '</a></div>';
html += '</div>';                                        

html += '</div>';

$('.s1 .swiper-wrapper').append(html);

Hope this helps, keep in mind that this code was meant for a website I made, so ur gonna have to change it a bit.

Collectives™ on Stack Overflow

How to create html component in javascript

5 Answers 5

4 Comments

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related