JavaScript内のp要素を印刷する方法

私は静的なHTMLでこれを行うことができますが、私は動的に作成したいと思っています。ここに私がしたいことがあります：私は2つのdivを持っています。JavaScript内のp要素を印刷する方法

<div class="TxtTile"> 

    </div> 
    <div class="pInfo"> 

    </div>

各部門の中にいくつかの段落があります。各divに10としましょう。クラス"TxtTile"の最初のdiv私は何かのタイトルを持っていたい、年齢、国、経験、通りなどのようなタイトルを言いましょう。'pInfo'クラスの他のdivでは、TxTtitleに対応する情報を入れたいと思います。年齢25、経験10年などは、ローカルストレージから取得します。ここでは既に設定しています。この2つのdivはお互いに隣り合っていて、私はすでにCSSでやっています。

たとえば、左側

<div class="TxtTile">    `<div class="pInfo"> 

<p class="styleforP">     <p class="styleforP"> 
    Age          25 
             </p> 
</p> 

</div>        </div>`

私はネイティブJSでこれを行うことができます場合、私は幸せになります。）

1あなたは要素を作成し、その場所

まずここでは、新しい要素を作成したいの内側のdiv要素を取得するために追加保つことができます。

出典

2016-09-02 Bokchee 88

']（http://www.w3schools.com/html/html_tables.asp））は、この要件のための良い解決策かもしれません。 – Pugazh

レイアウト用にテーブルを使用することは決して良い解決策ではありません。表は純粋に表形式のデータでなければなりません。 – JosephGarrone

答えて

あなたがこれを行うことができる2つの方法があります。むしろクラスを持つよりも、私はあなたが同様にその中にコンテンツを追加することができ、

var element = document.querySelector('.TxtTile');

がp要素を作成し、それにクラスを追加する要素のidベースの選択をしていることを好むだろうHTMLテンプレートは、そのテンプレートに自分の価値観を渡し、innerHTMLプロパティを作成しますあなたのdiv

element.appendChild(pElem);

2）内の要素を作成し、直接あなたの親要素にinnerHTMLのことを入れ

var pElem = document.createElement('p'); pElem.className = 'styleforP'; pElem.innerHTML = 'Age';

追加を膨潤

var item = { 
    name: "My Name", 
    age: 30, 
    other: "Other Info" 
} 
var template = []; 

template.push(
    '<div class="row">', 
     '<span class="name-info">' + item.name + '</span>', 
     '<span class="age-info">' + item.age + '</span>', 
     '<span class="other-info">' + item.other + '</span>', 
    '</div>' 
); 

var htmlString = template.join(''); 
var element = document.querySelector('.TxtTile'); 
element.innerHTML = htmlString;

複数の項目を追加する場合は、2番目のアプローチは、1つの要素とアプリを作成する方がずっと優れていますそれらをDOMツリーに終わらせるのは非常に遅く、HTML文字列全体を渡します。

出典

2016-09-02 07:23:22

何かもっと欲しいのかどうか教えてください。 –

私はこのアプローチが好きです。しかし、私は異なる値を持つTxtTileの中に複数のp要素が必要です、最初は年齢です、そして国などです、私は10が必要でしょう。私はそのように10回書く必要がありますか？ –

@ Bokchee88：これを行うには2つの方法があります。1）要素を作成してその場所に追加し続けることができます。2）HTMLテンプレートを作成してそのテンプレートに値を渡し、innerHTMLを作成してinnerHTMLを親要素に直接入れます。 –

var myData = { 
 
    title: "My title", 
 
    info: 25 
 
}; 
 

 
// Store references to the wrapper elements 
 

 
// The first element that has this class, or null if there aren't any 
 
var titleWrapper = document.querySelector(".js-titleWrapper"); 
 
var infoWrapper = document.querySelector(".js-infoWrapper"); 
 

 
// Create the paragraph elements 
 
var titleP = document.createElement("p"); 
 
var infoP = document.createElement("p"); 
 

 
// Add classes 
 
titleP.classList.add("styleForP"); 
 
infoP.classList.add("styleForP"); 
 

 
// Add the text 
 
titleP.innerText = myData.title; 
 
infoP.innerText = myData.info; 
 

 
// Add the paragraphs to their wrappers 
 
titleWrapper.appendChild(titleP); 
 
infoWrapper.appendChild(infoP);

<div class="TxtTile js-titleWrapper"> 
 
</div> 
 

 
<div class="pInfo js-infoWrapper"> 
 
</div>

出典

2016-09-02 07:26:08 user3297291

私は、これはあなたが複数のレコードを持っているならば、あなたはquerySlectorで扱うカントこれを行うための悪いアイデアだと思います。

良いアイデアではJavaScriptによって、この要素を取得し、レコードが複数ある場合はループを適用し、この

var parentEle = document.getElementById("parent");

のようなあなたのダイナミックな記録と、この要素を追加し、この

<div id="parent"></div>

のような親要素を作成することです

var child = Document.createElement("div"); 
child.innerHTML = "<div class='TxtTile'>age</div><div class='pInfo'>25</div>"; 
parentEle.appendChild(child);

出典

2016-09-02 07:36:38

JavaScript内のp要素を印刷する方法

答えて

関連する問題