Добавить текст d3 к существующему html div

У меня есть div в html, который выглядит как

<div class = "newfield col-sm-4">
            <h2>42</h2>
            <h3>Appending above</h3>
</div>

И код в D3 (v4), который выглядит как

var word = "somestring";
d3.select('.newfield')
.append("h2")
.html(word.join('<br/>'));

Я хочу, чтобы текст «somestring» в формате D3 занимал место «42» в исходном HTML.

Так что конечный результат будет выглядеть как

<div class = "newfield col-sm-4">
            <h2>somestring</h2>
            <h3>Appending above</h3>
</div>

Мой текущий код D3 ничего не добавляет на экран. Мои скрипты импортируются в таком порядке

<script src = "http://d3js.org/d3.v4.min.js"></script>
<script src = "http://d3js.org/queue.v1.min.js"></script>
<script src = "http://d3js.org/topojson.v1.min.js"></script>
<script src = "js/customd3.js"></script>
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"></script>