Auteur Topic: Manipuleren en plaatsen van <template> tag met javascript  (gelezen 2777 keer)

0 leden en 1 gast bekijken dit topic.

xvilo

  • Global Moderator
  • Verslaafd DigitalPlace Lid
  • *****
  • Berichten: 2674
  • Karma: -44
    • Bekijk profiel
    • http://www.xvilo.com
Manipuleren en plaatsen van <template> tag met javascript
« Gepost op: juli 30, 2016, 03:01:14 pm »
  • [+1]0
  • [-1]0
  • Hallo,

    Nog een vraag mbt het zelfde project. Ik wil graag dat mensen extra form items kunnen toevoegen.
    Ik maak daarom gebruik van de <template> tag met daarin de code.

    Voordat de code kan worden geplaatst moet er wat dom manipulatie plaats vinden. Het is namelijk een form array, en de items moeten dan natuurlijk een nieuwe hogere index krijgen.

    Mijn template tag:
    <template id="phonetemplate">
    <li class="user-card--info-list__item">
    <span>
    <input placeholder="Type"  type="tel">
    </span>
    <input placeholder="Phone">
    </li>
    </template>

    Wat er moet gebeuren is dat elke input binnen de template tag de name, ne[0][] krijgen, waarbij ne een variable is en 0 de index.
    Er staat er al één in de html met 0 dus hij moet vanaf 1 beginnen. Ik ben al zo ver gekomen met Javascript:
    var count = 1;
    function addField(ta,te,ne){
    console.log("Target: "+ta+" Template: "+te+" Name: "+ne)
    var parser      = new DOMParser ();
    var content  = parser.parseFromString (document.getElementById(te).innerHTML, "text/html");
    var elements = content.getElementsByTagName("input");
    Array.prototype.forEach.call(elements, (el)=>{
    el.setAttribute("name", ne+'['+count+'][]');
    });
    console.log("HIER: "+content);
    var original = document.getElementById(ta).append(content.getElementsByTagName("li"));
    count++;
    }

    Nu ontstaan er 2 problemenHet eerste probleem is dat bij console.log("HIER: "+content); de variable elements wel de juiste aangepaste name hebben, maar content zelf niet.

    Het 2e probleem is dat als ik content probeer te plaatsen in de parent (in dit geval aangeduid met ta) dan krijg ik niet de html code er in, maar komt er als text "[object HTMLCollection]" te staan.

    Kan iemand zo vriendelijk zijn om mij te helpen met de 2 problemen? Alvast bedankt!

    Groet,

    xvilo

    EDIT:
    Eerste probleem is al opgelost, mar het probleem met "[object HTMLCollection]" nog niet

    EDIT2:
    Dankje @Thumb voor je verlossende google resultaat!

    De boel is opgelost :D
    « Laatst bewerkt op: juli 30, 2016, 03:12:57 pm door xvilo »