JavaScript : 동적 HTML에서 문자열 사용

JavaScript를 처음 사용하고 HTML 문서의 동적 생성 과정에서 문자열을 'innerHTML'에 전달하는 데 문제가 있습니다. 이유 : 이미지 경로를 지정해야하고 쿠키에서 검색 한 세부 정보에 따라 다른 이미지를 화면에 출력 할 수 있어야합니다 (예 : 이미지 경로가 매번 바뀌므로 image = 1001.jpg, image = 1002.jpg 등, 검색된 개체 세부 정보에 따라 다름). 현재, 내가 하드 코드하지 않는 한 :JavaScript : 동적 HTML에서 문자열 사용

"<p><img src=\images/1005.jpg"\"</p>";

나는 출력을 얻지 못한다. 나는이 줄에 문자열을 입력하는 다양한 방법을 시도했지만 지금까지는 기쁨이 없었다. 내 코드가 가장 좋지는 않지만 이미지 문제는 제외하고 작동합니다.

function changeMe(){ 

... 

var studentObject = JSON.parse(getName); // info from cookie 

var path = studentObject.imagePath; // works: images/1005.jpg 
var res = path.charAt(10) 
//alert(res); // = 5, works 
var newPath = "<p><img src=\"images/1001.jpg\"></p>"; 
// I 'amend' the newPath string value: 
**var answer = newPath.substr(0, 23) + res + newPath.substr(25.26);** 
//alert(answer); // works: <p><img src=\"images/1005.jpg"\</p> 

var oPara = document.createElement('p'); 
oPara.style.fontFamily = "Arial sans-serif"; 
oPara.style.fontSize = "20px"; 
oPara.style.color = "#77787E"; 
oPara.style.fontWeight = "bold"; 
oPara.innerHTML = "<p><br>Name & Surname: " + studentObject.name + " " + 
studentObject.surname + "</p>" + answer; // doesn't work 
//"<p><img src=\\" + "\"" + path + "\"" +"></p>"; // this doesn't work either 

document.body.appendChild(oPara); 
}

무엇이 여기에 있습니까?

출처

2014-03-31 user2781042

문제를 일으키지 않는 위의 코드에서 모두 제거하십시오. 예 : oPara.style.fontFamily 이렇게하면 더 나은 답변을 얻을 수 있습니다. – bnieland

당신은 'p'요소로 oPara를 만들었습니다. p를 p 안에 중첩시킬 수 없습니다. –

BTW - JS에서 작은 따옴표와 큰 따옴표를 섞어도 상관 없으므로 탈출 할 필요가 없습니다. var newPath = "

"; –

이 예가 도움이됩니까?

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title> Bla! </title> 
     <script type='text/javascript'> 
      function AddStudent() { 
       var studentData = { "name":"John Dou" }; // for the exmaple. 
       var paragraph = document.createElement('p'); 
       // set any style 
       paragraph.innerHTML = "The student " + studentData.name + " added to the family"; 
       document.body.appendChild(paragraph); 
      } 
     </script> 
    </head> 
    <body> 
     <button onclick='AddStudent()'> Add Student </button> 
    </body> 
</html>

출처

2014-03-31 19:08:30

설명해 주셔서 감사합니다. 그런 구조에 이미지 링크를 추가하는 방법과 이미지 경로가 매번 다른 방법을 사용하는 방법에 대해서는 여전히 불확실합니다 (예 : "

"; – user2781042

걱정할 필요가 없습니다. 찾았어요! – user2781042

JavaScript : 동적 HTML에서 문자열 사용

답변

관련 문제