Как использовать Javascript для одновременного создания родительского и дочернего элементов с переменным содержимым

У меня есть JSON из массива PHP assoc:

Array(
    [0] = > Array(
        [topicid] = > 17
        [entry] = > number 12 this one
        [belongdate] = > 2017 - 06 - 12
        [edittime] = > 2012 - 06 - 18 05: 22: 21
        [User_ID] = > 1
    )
    [1] = > Array(
        [topicid] = > 9
        [entry] = > yeah 11 now
        [belongdate] = > 2017 - 06 - 12
        [edittime] = > 2012 - 06 - 18 05: 22: 02
        [User_ID] = > 1
    )
)

Я не даю вам JSON напрямую, потому что я не знаю, как правильно печатать JSON.

Мне нужно создать родительский div и несколько дочерних элементов:

        <div name='entrydiv' class='entrydiv'>          
            <h3 name='topich3' class='topich3'>
                entryjson[i]['topicid']
            </h3>
            <p name='entryp' class='entryp'>
                entryjson[i]['entry']
            </p>
            <a name='belongdatea' class='belongdatea' style='display: none;'>
                entryjson[i]['belongdate']
            </a>
            <a name='lastedittimea' class='lastedittimea'>
                entryjson[i]['edittime']
            </a>
        </div>

Обратите внимание, что содержимое является переменным из JSON. Я проверил этот сообщение. Но метод .append, похоже, не поддерживает передачу переменной в содержимое. И метод .appendTo не допускает дочерний элемент (?). Я очень ценю вашу помощь. Спасибо.


javascript variables parent-child element
person Ivan Wang    schedule 17.06.2012    source источник
comment
Но метод .append не поддерживает передачу переменной в содержимое. Что именно вы пробовали?   -  person Felix Kling    schedule 18.06.2012
comment
Ну я попробовал так (может просто не так сделал) topicid=entryjson[i]['topicid']; $("<div name='entrydiv' class='entrydiv'><h3 name='topich3' class='topich3'> topicid</h3></div>").appendTo('#bodydiv');   -  person Ivan Wang    schedule 18.06.2012
comment
Используйте конкатенацию строк. Например var str = "<p name='entryp' class='entryp'>" + entryjson[i]['entry']" + "</p>";   -  person Victor    schedule 18.06.2012
comment
@ B7ackAnge7z Вау, у меня отлично работает. Так что все дело было в побеге. Спасибо большое.   -  person Ivan Wang    schedule 18.06.2012
comment
Нет, речь идет не об экранировании кавычек, а о правильном построении строки. Как JavaScript должен знать, что внутри вашей строки topicid является ссылкой на переменную (и почему бы, например, не entrydiv)? Как он может узнать, что вы хотите заменить его его значением? Это невозможно.   -  person Felix Kling    schedule 18.06.2012

Ответы (2)


arrow_upward
1
arrow_downward

Вот один пример. Чтобы создать эту структуру DOM:

<div name='entrydiv' class='entrydiv'> 
    <h3 name='topich3' class='topich3'>
       entryjson[i]['topicid']
    </h3>
</div>

Вы можете использовать этот простой код javascript:

var mainDiv = document.createElement("div");
mainDiv.name = mainDiv.className = "entrydiv";
document.body.appendChild(mainDiv);

var item = document.createElement("h3");
item.name = item.className = "topich3";
item.innerHTML = entryjson[i]['topicid'];
mainDiv.appendChild(item);

Вы можете добавить код для других частей, а затем добавить цикл для повторения вашего JSON.

person jfriend00    schedule 17.06.2012

arrow_upward
0
arrow_downward

Если вы хотите создать следующую структуру:

<div class="yourClassInHTML">
...
<div>
<img src="thePath"></img>
</div>
...
</div>

тогда код .js будет:

var element1 = document.createElement("div");
var element2 = document.createElement("img");
img.src = "thePath";
element1.appendChild(element2);
document.getElementsByClassName("yourClassInHTML")[0].appendChild(element1);
person Darius Miliauskas    schedule 09.12.2014