如何在javascript中创建html组件

我想在javascript中创建我的html component。有没有什么办法可以从javascript函数获得这个div部分。如何在javascript中创建html组件

我的HTML代码

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

来源

2017-05-04 David

我不understant你QN ??? –

你想得到哪个div部分？ –

@MantasČekanauskas我通过使用id传递'div'由id我想通过使用JavaScript创建此表。 – David

这是我的抽动TAC答案。

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; 

    }

来源

2017-05-04 09:51:42

我早些时候使用.append（），它是jQuery。然后发现jQuery没有使用 –

是的，但通过这种方式，我只能添加表。没有输入。 – David

输入什么。？你没有在QN中输入任何内容。在下面的评论中，你说你想在div中添加表格。看看你的qn的第一条评论。试着让我们明白你真正需要的是什么。 –

进行追加，你可以，如果你正在使用jQuery使用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) 
}

来源

2017-05-04 09:53:42

，尝试：

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

使用javascript：

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

来源

2017-05-04 09:54:18 chris

jQuery：这是我的代码中的一个例子，var html只是确保你不必一遍又一遍地写同一段代码。

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

希望这会有所帮助，请记住，这些代码意味着一个网站我做了，所以乌尔得改变它一下。

来源

2017-05-04 09:57:30

您可以使用使用document.createElement（），如：

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

You can refer this link for more details

来源

2017-05-04 10:13:22 hvs9

雅..但是，我怎么会在 – David

添加表试着这么做： '函数（结果）{ \t \t无功表\t \t =使用document.createElement（ “表”）; \t \t \t \t var row \t \t =表。的insertRow（）; \t \t \t 为\t）（在结果VAR键）{ \t \t \t \t \t \t变种CELL1 \t \t = row.insertCell（; \t \t \t cell1.innerHTML = result [key]; \t \t \t \t \t} }' – hvs9

感谢您的回答。我正在尝试这 – David

如何在javascript中创建html组件

回答

相关问题