JavaScript- jak wydrukować element p wewnątrz div

Wiem, że mogę to zrobić ze statycznym kodem HTML, ale chcę tworzyć dynamicznie i bardzo walczę. Oto, co chcę zrobić: Mam 2 divs.JavaScript- jak wydrukować element p wewnątrz div

<div class="TxtTile"> 

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

    </div>

Wewnątrz każdego elementu div chcę mieć kilka akapitów. Powiedzmy 10, w każdym div. Pierwszy div z klasą "TxtTile" Chcę mieć tytuł czegoś, powiedzmy tytuły takie jak, wiek, kraj, doświadczenie, ulica itp. W drugim dziale z klasą 'pInfo' Chcę zawierać informacje, które odpowiadają TxTtitle. Podobnie jak w wieku 25 lat, 10 lat doświadczenia itp., Które zostaną pobrane z lokalnego magazynu, w którym już je skonfigurowałem. Te dwa elementy div będą obok siebie, co już zrobiłem z css.

Na przykład. Lewa strona

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

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

</div>        </div>`

Byłbym szczęśliwy, jeśli mogę to zrobić z rodzimymi js.

Źródło

2016-09-02 Bokchee 88

'] (http://www.w3schools.com/html/html_tables.asp) może być dobrym rozwiązaniem dla tego wymogu. – Pugazh

Używanie tabel do układu nigdy nie jest dobrym rozwiązaniem. Tabele powinny być wyłącznie danymi tabelarycznymi. – JosephGarrone

Odpowiedz

Istnieją dwa sposoby, można to zrobić:

1) można utworzyć element i trzymają dołączenie do jego miejscu

najpierw uzyskać div elementu wewnątrz którego chcesz utworzyć nowy element, tutaj zamiast klasę wolałbym mieć wybór w oparciu o id elementu

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

Tworzenie elementu p i dodać do niego klasę, można w podobny sposób dodać zawartość wewnątrz niego jest puchną

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

Dołącz który stworzył elementu wewnątrz div

element.appendChild(pElem);

2) Utwórz szablon HTML przekazać swoje wartości do tego szablonu i tworzenie innerHTML i bezpośrednio umieścić że innerHTML do swojego elementu nadrzędnego

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;

Jeśli zamierzasz dodać dużo przedmiotów, drugie podejście jest o wiele lepsze, ponieważ tworzenie pojedynczego elementu i aplikacji zakończenie ich do drzewa DOM jest dość powolne, a następnie podanie całego ciągu znaków HTML.

Źródło

2016-09-02 07:23:22

Daj mi znać, jeśli chcesz czegoś więcej .. –

Podoba mi się to podejście. Ale potrzebuję wielu elementów p wewnątrz TxtTile z różnymi wartościami, jak na przykład wiek, to jest kraj itp., Potrzebowałbym 10. Czy muszę napisać 10 razy w ten sposób? –

@ Bokchee88: Można to zrobić na dwa sposoby: 1) można utworzyć element i zachować dołączanie do jego miejsca. 2) Utwórz szablon HTML przekazujący swoje wartości do tego szablonu i utwórz innerHTML i umieść ten wewnętrzny HTML w swoim macierzystym elemencie –

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>

Źródło

2016-09-02 07:26:08 user3297291

myślę, że jest to zły pomysł, aby robić to, jeśli masz wiele rekordów wtedy mogę poradzić przez querySlector.

dobrym pomysłem jest stworzenie elementu nadrzędnego jak ten

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

następnie dostać ten element przez JavaScript, a następnie dołączyć ten element z dynamicznych rejestrów jak ten

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

zastosować pętlę jeśli rekordy są wielokrotnością

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

Źródło

2016-09-02 07:36:38

Powiązane problemy