document.createElement / document.body.appendChild не создает / не записывает div там, где выполняется - PullRequest
Новая
       17

document.createElement / document.body.appendChild не создает / не записывает div там, где выполняется

2 голосов
/ 03 февраля 2012

У меня есть div с идентификатором 'headercontent', и у меня есть скрипт, который будет писать ссылку среди других, если javascript включен в системе пользователя, но также имеет резервную копию с использованием noscript на тот случай, если у пользователя нет JavaScript включен.

Код работает нормально, и элемент 'a' записывается при выполнении, но проблема в том, что код не записывается в div, в котором он выполняется. Он записывает его вне div 'headercontent' и игнорирует класс стиль полностью, даже если он написан в отрендеренном коде. Меня не слишком беспокоит стиль / класс, потому что я могу просто добавить атрибут стиля к элементу и, если необходимо, записать его с помощью javascript, но меня больше беспокоит, почему он пишет код вне этого div.

Мой код: 

<div id="headercontent">
    hey, this is a div.
    <a href="#" class="button">This is a link</a>
    <a href="#" class="button">This is another link</a>

    <script type="text/javascript">
        writeask()
        function writeask() {
         var writeaskbox = document.createElement('a');
         writeaskbox.href = 'javascript:askbox()';
         writeaskbox.className = 'button';
         writeaskbox.innerHTML = 
             ['Ask'].join(' ')
         document.body.appendChild(writeaskbox);
        }

        function askbox(){
         var askbox = document.getElementById('askbox')
         if (askbox.style.display == 'none') {
          askbox.style.display = 'block'
          askbox.style.height = '150px'             
         } else {
          askbox.style.display = 'none'
          askbox.style.height = '0px'
         }
        }
    </script>
    <noscript><a href="/ask" class="button">Ask</a></noscript>
</div>

Как мне получить функцию writeask () для создания этого элемента в том же div, в котором он выполняется? Так что окончательный результат: 

<div id="headercontent">
    hey, this is a div.
    <a href="#" class="button">This is a link</a>
    <a href="#" class="button">This is another link</a>
    <a href="javascript: askbox()" class="button">Ask</a>
</div>

Вместо: 

<div id="headercontent">
    hey, this is a div.
    <a href="#" class="button">This is a link</a>
    <a href="#" class="button">This is another link</a>
</div>
<a href="javascript: askbox()" class="button">Ask</a>

Я все еще начинающий с javascript, поэтому сейчас я немного озадачен. Если бы кто-то мог помочь, это было бы хорошо.

Заранее спасибо. Dan.

Ответы [ 3 ]

3 голосов
/ 03 февраля 2012

Прежде всего, вы вызываете writeask () до того, как функция существует, поэтому в этом случае вы должны сделать это наоборот. Должно быть: 

function writeask() {}
function askbox(){}

writeask();

и затем вы добавляете его к телу 

document.body.appendChild(writeaskbox);

, а не div, как и должно быть 

document.getElementById("headercontent").appendChild(writeaskbox);
3 голосов
/ 03 февраля 2012

вместо 

document.body.appendChild(writeaskbox);

использование 

document.getElementById("headercontent").appendChild(writeaskbox);
2 голосов
/ 03 февраля 2012

Вместо 

document.body.appendChild(writeaskbox);

Вы должны сделать следующее: 

document.getElementById('headercontent').appendChild(writeaskbox);
...