Javascript в HTML - Использование одинарной кавычки внутри другой одинарной кавычки
document.getElementById("img").innerHTML="< img src='/sitepath/"+imgg+".jpg' width='72' height='44' onclick='alert('hello');' />";
Приведенный выше код - мой javascript. Проблема в том, чтобы напечатать привет или любую другую строку. Если я просто наберу 123 вместо приветствия, он выдаст предупреждение. Но я не могу использовать такую строку, как привет. Обычно строка в функции оповещения хранится в кавычках '', но весь контент находится в двойных кавычках, и я уже использовал одинарные кавычки в начале функции onclick. Я пытался использовать Escape-символ ("\"), но это не помогло. Есть предложения?
5 ответов
Если вы используете апострофы в качестве разделителя для атрибутов HTML, вам необходимо HTML-кодировать апострофы, которые вы помещаете в атрибут:
document.getElementById("img").innerHTML="< img src='/sitepath/"+imgg+".jpg' width='72' height='44' onclick='alert('hello');' />";
Я предпочитаю использовать апострофы в качестве разделенных строк в Javascript и кавычки в качестве разделителей для HTML-атрибутов. Затем вы просто экранируете апострофы, которые у вас есть внутри Javascript string:
document.getElementById("img").innerHTML='< img src="/sitepath/'+imgg+'.jpg" width="72" height="44" onclick="alert(\'hello\');" />';
Чтобы поместить любую строку внутри Javascript, внутри HTML атрибута, внутри строки в Javascript, вы делаете:
- экранируете любые разделители строк в string
- HTML, кодируете Javascript code
- экранируете любые разделители строк в HTML string
У вас есть JavaScript внутри HTML внутри JavaScript. Это естественно сбивает с толку. Лучше избежать проблем со строковой строковой строкой при цитировании и экранировании (что, если ошибиться, может легко привести к дырам в безопасности, когда используются данные, предоставленные пользователем), и сделать это DOM способом:
var img= new Image();
img.src= '/sitepath/'+imgg+'.jpg';
img.width= 72;
img.height= 44;
img.onclick= function() {
alert('hello');
};
document.getElementById('img').appendChild(img);
Не имеет значения, одинарные или двойные внешние котировки. Вы можете экранировать символ внутри внешней строки обратным слешем... \' становится ' внутри самой строки. Сработает либо пример Дарина, либо Масуда. Но Масуд невежественен в ссылке на необходимость использования двойных кавычек в качестве внешней оболочки
.Вам нужно использовать двойные кавычки и экранировать их в атрибуте onclick
document.getElementById("img").innerHTML="<img src='/sitepath/"+imgg+".jpg' width='72' height='44' onclick=\"alert('hello');\" />";
Попробуйте следующее:
document.getElementById("img").innerHTML = '<img src="/sitepath/' + imgg + '.jpg" width="72" height="44" onclick="alert(\'hello\');" />';