Использование append() из JQuery вне HTML-документа

Я пытаюсь использовать JQuery в отдельном файле .JS, так как сохранение всего кода JavaScript из HTML-документа повышает производительность загрузки HTML-документа.Использование append() из JQuery вне HTML-документа

Для этого примера я использую "index.html" и "main.js"

Ниже index.html:

<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>append demo</title> 

     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <script src="testJS/main.js"></script> 

    </head> 
    <body> 

    <p>I would like to say: </p> 


<!-- CODE BELOW MUST BE REMOVED FROM THIS DOCUMENT --> 
    <script> 
    $("p").append("<strong>Hello</strong>"); 
    </script> 

    </body> 
    </html>

Я хотел бы, чтобы вырезать код из HTML и вставить его в main.js однако ниже пример не работает для меня:

main.js:

p.append("<strong>Hello</strong>");

Я также попытался это, но безуспешно:

$("p").append("<strong>Hello</strong>");

Как я могу это исправить, и какова разница между наличием JavaScript внутри и иметь его внутри .js файл?

источник

2013-09-19 user2636774

Я хотел бы предложить использовать функцию $(document).ready(), что JQuery обеспечивает что-то вроде этого:

$(document).ready(function() { 
    $("p").append("<strong>Hello</strong>"); 
});

Здесь Вы можете найти более подробную информацию: http://learn.jquery.com/using-jquery-core/document-ready/

источник

2013-09-19 00:07:55 axy108

Вам нужно добавить код в йоте готового обработчика, потому что в противном случае, если код выполняется в p элементе еще не добавлен в йот - это потому, что так как main.js добавляется перед p элементом в разметке, но в любом случае самый безопасный вариантом является использование DOM готова обработчика для манипулирования йота

jQuery(function($){ 
    $("p").append("<strong>Hello</strong>"); 
})

источник

2013-09-19 00:06:45

При использовании внешних JS вы должны обернуть свой код в документе готовой функции как этого

$(function(){ 
    $('p').append('<strong>Hello</strong>'); 
});

* Не е - $(function(){ представляет собой сокращенную $(document).ready(function(){

источник

2013-09-19 00:07:25 mdesdev

Как пояснил Arun P Johny, проблема в том, что код js выполняется до того, как элементы DOM, от которых он зависит, готовы.

Другое решение - изменить внешний файл, чтобы он определял функцию, которую вы затем вызывали бы в конце тела в вашем html-файле.

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>append demo</title> 

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="testJS/main.js"></script> 

</head> 
<body> 

<p>I would like to say: </p> 

<script> 
    writeText(); 
</script> 
</body> 
</html> 


<!-- main.js --> 

function writeText(){ 
    $("p").append("<strong>Hello</strong>"); 
}

источник

2013-09-19 00:17:45

Использование append() из JQuery вне HTML-документа

ответ

Смежные вопросы