우리는 보통 게시판의 여분필드를 줄 때 아래처럼 코드를 줍니다.

input 의 디폴트 type 은 text 이므로 type="text" 는 생략이 가능합니다.

<input id="wr_1" name="wr_1" value="<?php echo $write['wr_1']; ?>">

-----

이걸 자바스크립트로 처리하면 아래처럼 됩니다.

<input id="wr_1" name="wr_1">
.
.
.
<script>
wr_1.value = "<?php echo $write['wr_1']; ?>";
</script>

----------

자바스크립트를 상단에 위치시키려면 아래처럼 해 주면 되겠죠?

<script>
document.addEventListener("DOMContentLoaded", () => {
    wr_1.value = "<?php echo $write['wr_1']; ?>";
} );
</script>
.
.
.
<input id="wr_1" name="wr_1">

----------

그렇다면 왜 굳이 자바스크립트로 처리하는 것이 편할까요?

바로 원본 write.skin.php 의 코드를 건드리지 않으려는 생각 때문에 그렇습니다.

다시 말하자면 최상단에 위치시키면 write.head.skin.php 에, 최하단에 위치시키면 write.tail.skin.php 에 저 코드를 주면 굳이 write.skin.php 를 건드리지 않고도 충분히 그것이 가능하기 때문입니다.

예를 들어서 pc basic 스킨의 write.tail.skin.php 에 아래의 코드를 입력해 주면

원본 스킨을 건드리지 않고도 아주 훌륭하게 여분필드가 만들어지는 걸 알 수 있을 것입니다.

<script>
document.querySelector("#bo_w .bo_w_tit").insertAdjacentHTML("afterend", "<input id='wr_1' name='wr_1'>");
wr_1.value = "<?php echo $write['wr_1']; ?>";
</script>

여기서 #bo_w .bo_w_tit 는 제목을 표시하는 영역을 의미합니다.

이건 이미 정의해준 id 나 class 로 접근하는 가장 유용한 방법입니다.

css 에서 매우 자주 나오는 형태이므로 css 를 어느 정도 습득하신 분이라면 금방 이해가 가실 거에요.

타이틀 영역 바로 다음("afterend")의 형제태그로 <input> 를 insertAdjacentHTML 메서드를 이용하여 동적으로 추가하라의 뜻입니다.