Javascript добавить Div и установить его ширину, как якорный текст

Question

Я пытаюсь создать div программным способом, добавить его в родительский div и установить ширину этого вновь созданного div, равную ширине текста, присутствующей внутри <a>...</a>, дочернего элемента того же родительского div (его брата).

HTML:

<div id='div0'>
 <a href="#">text</a>
</div>

JS / JQuery:

        var curDiv = document.getElementById('div0');
        var iDiv = document.createElement('div');
        iDiv.id = 'newDivId';
        iDiv.className = 'newDivClass';
        curDiv.appendChild(iDiv);

        // the div is appended successfuly
        // next step below doesn't work

        var curTxt = $('#div0').next("a").text();
        var curWidth = curTxt.width();

        $('.newDivClass').css('width', curWidth);

Что я получаю, используя .log, это переменная curTxt = (empty), и она также возвращает эту ошибку: curTxt.width is not a function.

Answer 1

вы можете сделать это

var curDiv = document.getElementById('div0');
var iDiv = document.createElement('div');
iDiv.id = 'newDivId';
iDiv.className = 'newDivClass';
iDiv.style.background = "red"
iDiv.style.height = "10px"
curDiv.appendChild(iDiv);

// the div is appended successfuly
// next step below doesn't work

var curWidth = $('#div0 > a').width();

console.log(curWidth)


$('.newDivClass').css('width', curWidth);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div0'>
 <a href="#">text</a>
</div>

Ваша главная проблема - next() Похоже, вы ищете брата или сестру, а ссылка - дочерняя.

Answer 2

Нет необходимости в JS для этого. Просто установите ваш div как display : inline-block.

#div0 {
   border: green solid 3px;
   display : inline-block;
}

a {
   border : blue solid 3px;
   font-size : 2rem;
}

<div id='div0'>
 <a href="#">text</a>
</div>