When data meets elements, each item lands in one of three sets: update (an element whose datum is still present), enter (new data with no element yet) and exit (elements whose datum has gone). join('text') is shorthand for join(enter => enter.append('text'), update => update, exit => exit.remove()). This page joins four books, then a list sharing two of them, and paints each set instead of removing the exits:
<script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script>
<svg width="620" height="86" font-family="Arial" font-size="16"></svg>
<script>
const show = keys => d3.select('svg').selectAll('text')
.data(keys, d => d) // match by the string itself (Section 6.2.5)
.join(
enter => enter.append('text').attr('fill', '#2e7d32').text(d => `${d} (enter)`),
update => update.attr('fill', '#1565c0').text(d => `${d} (update)`),
exit => exit.attr('fill', '#c62828').attr('y', 76).text(d => `${d} (exit)`))
.attr('x', (d, i) => i * 150).attr('y', 30);
show(['harbor', 'deepweb', 'saffron', 'summit']);
show(['saffron', 'summit', 'clock', 'glass']);
</script>
The returned selection merges enter and update in data order, so x puts saffron first; the two exits on the second row are what the default would remove. Before join() arrived in d3 5.8 (January 2019), code called enter(), exit() and merge() by hand, as older tutorials still do.