JavaScript- wie p Element innerhalb div

Ich weiß, ich kann dies mit statischen HTML tun, aber ich möchte dynamisch erstellen, und ich habe viel zu kämpfen. Hier ist, was ich tun möchte: Ich habe 2 Divs.JavaScript- wie p Element innerhalb div

<div class="TxtTile"> 

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

    </div>

Innerhalb jedes div möchte ich mehrere Absätze haben. Sagen wir 10 in jedem div. Das erste Div mit Klasse "TxtTile" Ich möchte den Titel von etwas haben, sagen wir Titel wie Alter, Land, Erfahrung, Straße usw. In der anderen div mit Klasse 'pInfo' Ich möchte die Informationen, die mit TxTtitle entspricht enthalten. Wie, Alter 25, Erfahrung 10 Jahre usw., das wird von lokalen Speicher genommen werden, wo ich bereits eingerichtet habe. Diese zwei divs werden nebeneinander sein, was ich bereits mit css gemacht habe.

Zum Beispiel. Linke Seite

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

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

</div>        </div>`

ich glücklich sein würde, wenn ich dies mit nativer js machen kann.

Quelle

2016-09-02 Bokchee 88

'] (http://www.w3schools.com/html/html_tables.asp) könnte eine gute Lösung für diese Anforderung sein. – Pugazh

Verwenden von Tabellen für das Layout ist nie eine gute Lösung. Tabellen sollten rein für Tabellendaten sein. – JosephGarrone

Antwort

Es gibt zwei Möglichkeiten, wie Sie dies tun:

1) können Sie ein Element erstellen und halten, um seinen Platz anhängt

Erstes div Element erhalten, innerhalb dessen Sie neues Element erstellen möchten, hier anstatt eine Klasse, die ich würde es vorziehen, id basierend Auswahl des Elements

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

erstellen p Element und fügen Klasse, um es zu haben, können Sie in ähnlicher Weise Inhalte in hinzufügen können ein schwellen

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

anhängen, die in Ihrem div

erstellt Element

element.appendChild(pElem);

2) Erstellen Sie eine HTML-Vorlage, um Ihre Werte zu dieser Vorlage übergeben und innerHTML- anlegen und direkt, dass innerHTML- in Ihr Elternelement

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;

Wenn Sie eine Menge von Elementen hinzufügen, dann ist der zweite Ansatz viel besser, als ein einzelnes Element und App zu erstellen sie auf DOM-Baum zu beenden ist ziemlich langsam und übergibt dann den ganzen HTML-String. wenn Sie mehr Datensätze haben dann kippen Sie behandeln von querySlector

Quelle

2016-09-02 07:23:22

Lassen Sie mich wissen, wenn Sie etwas mehr wollen .. –

Ich mag diesen Ansatz. Aber ich brauche mehrere p Elemente innerhalb TxtTile mit verschiedenen Werten, wie zuerst ist Alter, dann ist Land etc, ich würde 10. Also muss ich 10 mal so schreiben? –

@ Bokchee88: Es gibt zwei Möglichkeiten, wie Sie dies tun können 1) Sie können ein Element erstellen und an seinen Platz hängen 2) Erstellen Sie eine HTML-Vorlage übergeben Sie Ihre Werte zu dieser Vorlage und erstellen Sie innerHTML und direkt diese innerHTML in Ihrem übergeordneten Element –

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>

Quelle

2016-09-02 07:26:08 user3297291

Ich denke, dies zu tun dies eine schlechte Idee ist.

gute Idee ist es, ein übergeordnetes Element erstellen wie diese

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

dann durch Javascript um dieses Element und dann hängen Sie dieses Element mit Ihren dynamischen Aufzeichnungen wie diese

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

gilt Schleife, wenn Datensätze mehrere sind

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

Quelle

2016-09-02 07:36:38

Verwandte Themen