html구조를 js로 변경하는 방법 있을까요?
본문
카페24로 코딩을 하고 있는데 html구조를 바꿔야합니다
근데 그 구조가 변수로 되어있어 헨들링이 안되네요,,,,
혹시 방법이 있을까요? 예를들면 밑에처럼 <div>안에 감싸져있는데 밖으로 빼낸다거나하는....
<div id="category" module="Layout_category">
<!--@css(/css/module/layout/category.css)-->
<!--@js(/js/module/layout/category.js)-->
<div class="position">
<ul>
<li><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>
<li><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>
<li><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>
<li><a href=''>community</a></li>
</ul>
</div>
</div>
코드는 이렇구요
개발자 도구에는 이렇게 되어 있습니다 1번 ul을 2번ul 밖으로 빼고 싶어요,,,,,
헤더 카테고리에 마우스 오버시 전체 카테고리가 드롭다운되는 걸 만들어야하는데 이렇게 빼내야 가능할것 같아서요ㅜㅜㅜ
답변 2
자바스크립트가 가능하다면 옮기고 싶은 엘레먼트의 innerHTML 을
이동시키고 싶은 위치의 엘레먼트로 카피시키고
원래의 엘레먼트를 remove() 시켜 삭제해버리면 되는데...
어차피 코드변수는 웹페이지에서는 html 로 보이니까 아무 상관이 없구요.
근데 자바스크립트를 허용해 주나요?
...
<div id="category" module="Layout_category">
<div id=my class="position">
<ul>
<li><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>
<li><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>
<li><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>
<li><a href=''>community</a></li>
</ul>
</div>
</div>
... 여기 아래
<div id=copy></div>
<script>
copy.innerHTML = my.innerHTML;
my.remove();
</script>
만일 자바스크립트를 허용해 주지 않는다면 아무 투명이미지나 만들어서
크기를 0으로 주고 이미지온로드시 위의 이벤트를 적용해 주어도 됩니다.
...
<div id="category" module="Layout_category">
<div id=my class="position">
<ul>
<li><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>
<li><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>
<li><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>
<li><a href=''>community</a></li>
</ul>
</div>
</div>
... 여기 아래
<div id=copy></div>
<img src=투명이미지주소 style=width:0px onload="copy.innerHTML=my.innerHTML;my.remove()">
답변 감사합니다 무슨 말인지 이해는 하겠는데 그럼 id=my값을 class=sub-category(위 개발자도구 이미지에 보면 1번 ul위에 있습니다)에다가 줘야하는건 아닌가요? class=position요소에 주니깐 적용되지 않는 것 같습니다ㅜㅜ
그걸 밖으로빼낼려면 , 그냥 밖으로 빼지말고 2번ul (depth1) 에 저 내용을 추가하면 되는거아닌가요?
만약 저 구조를 그대로 가고싶으시다면 제생각엔
1번 ul 이 숨겨져있는걸 전부 show 해주고 호버시 드롭다운 구현하면 될거같네요
