카테고리 없음
[JS] jQuery '[object Object]' 출력오류
크피르
2022. 12. 28. 21:29
append 는 쉼표를 붙이면 각각 태그가 붙어서 나와버린다.
+로 이어 붙이면 뒤에 오는게 string이면 [object Object]가 나온다.
결국 ul를 따로 만들어주어야 한다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="./sample10.js"></script>
<title>Document</title>
</head>
<body>
<h3> 즐겨찾기 목록 만들기</h3>
<form>
<div>
<input id="url" type="text" name="url" placeholder="URL 주소 입력">
<input id="name" type="text" name="name" placeholder="이름입력">
<button type="button" onclick="addBookmark();">저장</button>
</div>
</form>
<ul id="ul_list">
<li><a href="https://naver.com">네이버</a></li>
</ul>
</body>
</html>
첫시도
//sample10.js
function addBookmark(){
var urlId = $("#url").val();
var nameId = $("#name").val();
var ul_list = $("#ul_list");
var a = $("<a>").attr("href", urlId).text(nameId);
ul_list.append("<li>"+a+"</li>");
}
이유
+로 이어 붙이면 뒤에 오는게 string이면 [object Object]가 나온다...
즉, 숫자에 적용되는 + 연산자 오른쪽에 오는 값이 object인 경우에 자동으로 toString()메서드를 호출함!
https://okky.kr/articles/570916
OKKY - [JavaScript] '[object Object]' 출력오류
안녕하세요 Javascript 특성살려 정렬 구현하고 있는 초보자입니다.객체를 넣어도 잘 정렬이 되게 하고 싶은데 구현 중에 오류가 생겼습니다. [코드] let array = [3,1,2,4,5], test_Object = [ { a : 1} , { a : 2 },
okky.kr
두번째 시도
//sample10.js
function addBookmark(){
var urlId = $("#url").val();
var nameId = $("#name").val();
var ul_list = $("#ul_list");
var a = $("<a>").attr("href", urlId).text(nameId);
ul_list.append("<li>",a,"</li>");
}결과
이유
append 는 쉼표를 붙이면 각각 태그가 붙어서 나와버린다...
즉 li 다음에 a태그가 와서 저렇게 보인다.
세번째 ..
function addBookmark(){
var urlId = $("#url").val();
var nameId = $("#name").val();
var ul_list = $("#ul_list");
var a = $("<a>").attr("href", urlId).text(nameId);
var liTag = $("<li>");
liTag.html(a);
$(ul_list).first().append(liTag);
}결과
결론
귀찮지만 ul을 따로 만들어주는 수 밖에 없다!